Collective #573

Inspirational Website of the Week: Plink
Super-smooth animated models make Plink such a great browsing experience. Our pick this week.
Get inspired
Clubhouse: efficient teamwork, without silos
Clubhouse is the first software project management platform that brings everyone on every team together to build better products.
Try it Free
Interactivity and Animation with Variable Fonts
Some fantastic examples of creative experiments with variable fonts by Mandy Michael.
Read it
Write three.js in React Using react-three-fiber
A great tutorial by Robert Borghesi on how to change one's approach of writing 3D using three.js, leveraging React and using the react-three-fiber library.
Read it
Drawing Homer Simpson using circles in CSS
Read how Alvaro Montoro drew Homer Simpson in CSS, using only circles.
Read it
Leonardo: an open source contrast-based color generator
Read all about Leonardo, a color generator that helps with creating beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors.
Read it
7 Uses for CSS Custom Properties
Some clever and useful examples of how to take advantage of CSS variables. By Michelle Barker.
Read it
No to Chrome
It's important to raise awareness about the surveillance machine Google has become and "No to Chrome" is an attempt to do so by urging to seek out a better web browser as a simple first step to oppose Google's intrusive disregard for our rights.
Check it out
Spiral generator
A very nice spiral shape generator by Fabio Ottaviani.
Check it out
Game accessibility and the Web
Learn what accessible games are and how to use assistive technologies for games compiled to the web. By Matthew Atkinson.
Read it
Z's Still Not Dead Baby, Z's Still Not Dead
Andy Clarke encourages us to move beyond flatness and shows five CSS properties which help bring depth and richness to a design.
Read it
React View
React View is a set of tools that aspires to close the gap between users, developers and designers of component libraries.
Check it out
Building A CSS Layout: Live Stream With Rachel Andrew
Rachel Andrew talks about how to build a CSS layout using Grid and Flexbox.
Check it out
Learning Modern JavaScript with Tetris
Michael Karén writes about the basics in game development by the example of the classic game of Tetris.
Read it
It's Centred That
The festive Christmas edition of the epic design challenge.
Check it out
The Complete Guide to JavaScript Classes
Learn all about JavaScript classes in this guide by Dmitri Pavlutin.
Read it
SVG clip-path masking effect
Niklas Knaack's dynamic clip-path experiment.
Check it out
Cybertruck with Babylon.js
Hitesh Sahu created this fantastic demo of a cybertruck using Babylon.js.
Check it out
The unseen performance costs of modern CSS-in-JS libraries in React apps
Aggelos Arvanitakis aims to demystify the high-level strategies of the most popular CSS-in-JS libraries and discusses the performance issues they may introduce along with techniques to mitigate them.
Read it
WOOBRO.design
High-quality vector illustrations free for commercial or personal use.
Check it out
Building a Physics-based 3D Menu with Cannon.js and Three.js
Learn the basics of doing physics in WebGL by building a 3D menu with Cannon.js and Three.js as renderer.
Check it out