Collective #622

Inspirational Website of the Week: MGcream
A fun design with a modern touch and some lovely details. Our pick this week.
Get inspired

Website Heatmaps & Behaviour Analytics Tool
Understand how users are really experiencing your site without drowning in numbers!
Try it free

Parsel
Parsel is a tiny, permissive CSS selector parser by Lea Verou.
Check it out

react-three-flex
React-three-flex brings the flexbox spec to react-three-fiber to make it easier to place content. Check out this amazing demo. By Paul Henschel.
Check it out

REST API: Sorting, Filtering, and Pagination
In this great tutorial, Tania Rascia makes an example API endpoint and SQL query for various sort, paginate, and filter APIs.
Read it

Custom, accessible radio/checkbox buttons with perfect alignment
Learn how to create custom, accessible radio and checkbox buttons in CSS that perfectly align with their labels.
Check it out

How to pick more beautiful colors for your data visualizations
Lisa Charlotte Rost explains how to choose the right colors for your charts and visualizations.
Check it out

Alter
A creative 3D typeface exploration by Yuin Chien.
Check it out

AVIF has landed
Jake Archibald introduces the new AVIF image format that is derived from the keyframes of AV1 video.
Read it

Accessible Color Standards – Designing in the Browser
Una Kravets talks about color contrast in this new episode of “Designing in the Browser”.
Watch it

vanilla-colorful
A tiny color picker custom element for modern web apps. By Serhii Kulykov.
Check it out

Designing With Reduced Motion For Motion Sensitivities
An article by Val Head on how to use the prefers-reduced-motion-media feature.
Read it

How to build awesome forms with only HTML & CSS
A great Twitter thread by Arslan Khalid on how to build solid forms in a step-by-step manner.
Check it out

Candy Ring Preloader
A clever faux 3D ring preloader made by Jon Kantner.
Check it out

What is the Value of Browser Diversity?
Dave Rupert tries to answer a very important question.
Read it

DevTools architecture refresh: Migrating to JavaScript modules
The first article in a series of blog posts describing the changes the Chrome DevTools team is making to DevTools’ architecture and how it is built.
Read it

Duo
A really cool Three.js and GSAP demo by ycw. Check out this one, too.
Check it out

Read Me: Magazine
A fantastic Readymag essay (and template) on how to create good content and set it in type.
Check it out

How they test
A curated collection of publicly available resources on how software companies around the world test their software systems and build their quality culture.
Check it out

#s3e36 ALL YOUR HTML, Interactive Ribbon
A really good video tutorial by Yuri Artyukh where he dissects and builds an interactive WebGL ribbon.
Watch it

Education & LMS landing page design
A free landing page designed in Sketch with an educational theme.
Check it out

Responsive “Cool” Steps
Some fantastic step trickery by Jhey Tompkins.
Check it out

BLINK 3D Gallery
In case you haven’t seen this yet: BLINK is an online platform where art collectors, artists, and art lovers can meet and mingle to explore and enjoy art together.
Check it out

Styling Complex Labels
Danielle Romo’s tip on how to deal with more verbose input labels.
Read it