Collective #581
Inspirational Website of the Week: NT
On Nathan Taylor's portfolio everything is interactive! A true digital pleasure. Our pick this week.
Get inspired
Magical Rainbow Gradients with CSS Houdini and React Hooks
A great tutorial by Josh Comeau about a very creative way to animate magical gradients!
Read it
Tiny Helpers
Easily find useful single-purpose online tools on this site made by Stefan Judis.
Check it out
Start your own freelance business by becoming a Divi developer
Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.
Start learning now
Exploring the Web Animations API
Charlie Gerard walks us through a practical Web Animations API example.
Read it
Free Font: JetBrains Mono
A really great looking monospace font made for developers by JetBrains.
Check it out
An Introduction To React's Context API
In this article, you will learn how to use React's Context API which allows you to manage global application states in your React apps without resorting to props drilling.
Read it
Design Password
A fun designer-friendly password generator.
Check it out
Dark Isn't Just a Mode
Steven Hoober takes a look at what it means to be in dark mode, why it exists, and what the research on dark mode says.
Read it
Is reduce() bad?
Jake and Surma discuss the array function reduce() and answer the question if it's good to use it.
Watch it
The paradox at the heart of A/B testing
Matthew Ström writes about how the fundamental ideas of A/B tests contain a contradiction that calls their value into question.
Read it
CSS4 is here!
Peter-Paul Koch proposes that web developers start saying "CSS4 is here!", for the marketing effect.
Read it
SVG Pattern Doodler
A fantastic demo by Niklas Knaack where unique art is generated by an algorithm.
Check it out
Masonry layout
An exciting proposal to extend CSS Grid to support a masonry-type layout. By Mats Palmgren.
Check it out
Adding separators to layouts with CSS-in-JS
Mandy Michael writes about how to add separators to a grid using a combination of :not and :nth-child with a pseudo-element.
Read it
beedii
A hand-drawn Emoji set by Nitish Khagwal and Prafful Kumar.
Check it out
I have been underestimating JS
Alfonso de la Rocha shares his experience with digging deeper into JavaScript to have better low-level control.
Read it
Pure CSS dial button
A configurable CSS dial button demo by Jhey Tompkins.
Check it out
Flexbox Responsive Form
Adam Argyle created this responsive form with four potential layouts that is powered by Flexbox.
Check it out
30 seconds of code
What started with short JavaScript snippets has now grown into a snippet collection for all your development needs.
Check it out
3D Folding Layout Technique for HTML Elements
A tutorial on an experimental 3D layout technique for HTML elements with endless possibilities.
Check it out