Collective #489

React as a UI Runtime
An in-depth article by Dan Abramov that will help you understand the React programming model and runtime environment.
Read it
Northwestern's Online MS in Information Design and Strategy
Build the in-demand skills, such as UX, UI, and HCI, needed to drive user interactions. Choose a specialization in content strategy, analytics, or learning design.
Apply now
The curious case of disappearing buses
Yui-Wah (Clement) Lee analyzes the mysterious case of disappearing buses in the real-time traffic information shown on Bristol's bus display boards.
Read it
Bandwidth or Latency: When to Optimise for Which
Harry Roberts shares a DevTools tip to determine whether your assets would benefit most from an increase in bandwidth or a reduction in latency.
Read it
Learn React App
A tutorial with hands-on exercises to get you started with React.
Check it out
WOWA
The Unplash for audio: free (do whatever you want) music that you can use in your projects.
Check it out
Animated Boxes
A demo showing how the stagger feature in anime.js works. By the folks of Staak.
Check it out
The Many Ways to Change an SVG Fill on Hover (and When to Use Them)
Cassie Evans shows the different ways of changing the color of SVGs.
Read it
Lemon-JS
An accessible 3D rendering engine in JavaScript.
Check it out
useHooks
Easy to understand React Hook recipes by Gabe Ragland.
Check it out
Limiting JavaScript?
An article by Tim Kadlec where he discusses the controversial idea of limiting the amount of JavaScript a website can load.
Read it
dailydevlinks
A new site for a daily dose of web dev related articles.
Check it out
Avatars
A pixel-art avatar generator in JavaScript for browsers and NodeJS.
Check it out
MiniSearch
A tiny but powerful in-memory fulltext search engine for JavaScript. Read more about it in this article.
Check it out
Playing with sound and three.js
A three.js sound visualizer made by Sarah Drasner.
Check it out
Let's talk JS ?: unit testing
A useful collection of tools for doing unit tests by areknawo.
Read it
Free Font: US Blaak Bold
A sharp serif font with a glamorous look made by Unidaas. The bold style is for free.
Check it out
ASCII renderer
An interactive 3D world rendered in ASCII.
Check it out
Tubes
An interesting tubes animation made by soju22.
Check it out
Free Font: Gorod
A wide uppercase serif typeface by Ilya Zakharov.
Get it
Custom Cursor Effects
A collection of five demos and a tutorial on how to create animated custom cursor effects for interactive elements like navigations, galleries and carousels.
Check it out