Collective #622
![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_WOTW.jpg?x86293)
Inspirational Website of the Week: MGcream
A fun design with a modern touch and some lovely details. Our pick this week.
Get inspired![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/Screen-Shot-2020-09-09-at-16.16.23.png?x86293)
Website Heatmaps & Behaviour Analytics Tool
Understand how users are really experiencing your site without drowning in numbers!
Try it free![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_parsel.jpg?x86293)
Parsel
Parsel is a tiny, permissive CSS selector parser by Lea Verou.
Check it out![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/Screen-Shot-2020-09-10-at-15.56.54.jpg?x86293)
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![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_API.jpg?x86293)
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![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_checkboxes.jpg?x86293)
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![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_colorsdata.jpg?x86293)
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![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_alter.jpg?x86293)
Alter
A creative 3D typeface exploration by Yuin Chien.
Check it out![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_avif.jpg?x86293)
AVIF has landed
Jake Archibald introduces the new AVIF image format that is derived from the keyframes of AV1 video.
Read it![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_colorcontrast.jpg?x86293)
Accessible Color Standards - Designing in the Browser
Una Kravets talks about color contrast in this new episode of "Designing in the Browser".
Watch it![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_colorpicker.jpg?x86293)
vanilla-colorful
A tiny color picker custom element for modern web apps. By Serhii Kulykov.
Check it out![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_prefers.jpg?x86293)
Designing With Reduced Motion For Motion Sensitivities
An article by Val Head on how to use the prefers-reduced-motion-media feature.
Read it![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_forms.jpg?x86293)
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![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_loading.jpg?x86293)
Candy Ring Preloader
A clever faux 3D ring preloader made by Jon Kantner.
Check it out![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_diversity.jpg?x86293)
What is the Value of Browser Diversity?
Dave Rupert tries to answer a very important question.
Read it![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_devtools.jpg?x86293)
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![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_duo.jpg?x86293)
Duo
A really cool Three.js and GSAP demo by ycw. Check out this one, too.
Check it out![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_readme.jpg?x86293)
Read Me: Magazine
A fantastic Readymag essay (and template) on how to create good content and set it in type.
Check it out![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_howtheytest.jpg?x86293)
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![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_ribbon.jpg?x86293)
#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![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_sketch.jpg?x86293)
Education & LMS landing page design
A free landing page designed in Sketch with an educational theme.
Check it out![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_steps.jpg?x86293)
Responsive "Cool" Steps
Some fantastic step trickery by Jhey Tompkins.
Check it out![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_gallery.jpg?x86293)
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![Collective 622 item image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/09/C622_label.jpg?x86293)
Styling Complex Labels
Danielle Romo's tip on how to deal with more verbose input labels.
Read it