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