Collective #547

Machine Learning For Front-End Developers With Tensorflow.js
In this article, Charlie Gerard covers the three main features currently available using Tensorflow.js and sheds light onto the limits of using machine learning in the frontend.
Read it
How Video Games Inspire Great UX
A fantastic write-up by Scott Jenson on how to view UX design through the lens of game design.
Read it
Various Methods for Expanding a Box While Preserving the Border Radius
Ana Tudor explores the different methods for expanding/shrinking (pseudo-) elements while preserving their border-radius.
Read it
The Ultimate WordPress Page Builder
You've never built a WordPress website like this before. Divi is more than just a WordPress theme, it's a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor.
Try it
js-noisy-gradient
A small, fast single-function script for smoothing visible banding in linear-gradient backgrounds.
Check it out
Chakra UI
Chakra UI is a simple, modular and accessible component library that gives you all the building blocks you need to build your React applications.
Check it out
Burn
An amazing paper burn image transition made with Three.js by Yoichi Kobayashi.
Check it out
Google Engineering Practices Documentation
A collection of best practices that Google engineers have collected over time.
Read it
Popup Pump
Matthew Rayfield's hilarious popup windows experiment where you can enlarge a browser window by "pumping" another one.
Check it out
PowerToys
PowerToys is a set of utilities for power users to tune and streamline their Windows experience for greater productivity.
Check it out
Debugging TypeScript in Firefox DevTools
Jan Honza Odvarko explains how to compile TypeScript to JavaScript and generate a source-map that can be used to debug the code.
Read it
SVG to JSX
An SVG to JSX plugin for Figma so you can get the JSX code automatically inside Figma. By Sara Vieira.
Check it out
Offline listings
Remy Sharp shares how he implemented offline access to his page, showing recently visited blog posts.
Read it
Shaded islands
A great demo by Daniel Velasquez where you can generate shaded islands.
Check it out
Accessibility 360: Web and mobile
Ankita Kulkarni gives advice on how to make apps and websites accessible from the start.
Read it
CSS Grid: Magazine Layouts
Some awesome grid-powered magazine layouts made by Olivia Ng.
Check it out
Pixi Sprite Bubbles
Juan Fuentes created this bubbly demo.
Check it out
5 Handy Applications of JavaScript Array.from()
Dmitri Pavlutin explores five use cases of Array.from()
that are both useful and interesting.

Apple Just Shipped Web Components to Production and You Probably Missed It
Max Lynch on the new beta Apple Music Web Client and the use of Web Components.
Read it
Order Placed Confirmation
Mauricio Bucardo's take on Daniel Rasmussen's button concept. Also, check out Aaron Iker's implementation.
Check it out
Free Lineart Abstract Vector Illustrations
A beautiful set of abstract line art made by Tatiana Lapina.
Get it
Variable Fonts Experiment
A demo with two different themes that explores variable fonts on a draggable slider. By Supremo.
Check it out
Starship
Starship is a fast and minimal prompt for any shell that is highly customizable.
Check it out
A Configurator for Creating Custom WebGL Distortion Effects
A configurator for creating unique fullscreen image animations with WebGL distortion effects powered by Three.js.
Check it out