Collective #682
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_WOTW.jpg)
Inspirational Website of the Week: Lunchbox
It’s hip, it’s cool and the colors pop! We love this fresh design and the details. Our pick this week.
Get inspired
![Gun IO](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/Q4SponsorshipImages-1-600x600.png)
We connect exceptional developers with world-class companies.
We combine an industry-leading matching algorithm with human relationships and support to help you find the best candidate (or job), fast.
Check it out
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_walton.jpg)
My Challenge to the Web Performance Community
Philip Walton highlights how “getting a 100 on Lighthouse is definitely a very good sign, but it doesn’t guarantee that your site will be totally free of any performance issues in the real world”.
Read it
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_stateofcss.jpg)
The State of CSS Survey
The annual survey about the latest trends in CSS.
Check it out
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_atropos.jpg)
Atropos
Atropos is a lightweight, free and open-source JavaScript library to create touch-friendly 3D parallax hover effects.
Check it out
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_reactpreview.jpg)
React Preview
React Preview helps you preview any React component in your codebase.
Check it out
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_debug.jpg)
A Guide To CSS Debugging
Stephanie Eckles shows how to go about debugging in CSS, exploring techniques to prevent bugs altogether.
Read it
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_borderadius.jpg)
Conditional Border Radius In CSS
Ahmad Shadeed writes about how to use CSS comparison functions to create a conditional border radius.
Read it
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_lines.jpg)
Instanced Line Rendering Part II: Alpha blending
Rye Terrell’s followup to his post about instanced line rendering that allows for artifact-free alpha blending.
Check it out
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_acc.jpg)
Designing Accordions: Best practices
Roman Kamushken shares some accordion samples, templates, and UX cases for a smooth experience.
Read it
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_story.jpg)
The Andrei Sakharov Museum
A great storytelling experience with an amazing design.
Check it out
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_cssgradients.jpg)
CSS Gradient Editor
Beyond CSS gradients, this generator also has interesting patterns powered by gradients.
Check it out
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_audio.jpg)
Audio-reactive visual with Three.js
A beautiful audio-reactive demo created by Francesco Michelini using ThreeJS.
Check it out
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_sanitizer.jpg)
Safe DOM manipulation with the Sanitizer API
Learn about the new Sanitizer API, that aims to build a robust processor for arbitrary strings to be safely inserted into a page.
Read it
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_viewer.jpg)
Tidy Viewer
Tidy Viewer is a cross-platform CLI CSV pretty printer that uses column styling to maximize viewer enjoyment.
Check it out
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/Screen-Shot-2021-10-06-at-22.15.42.jpg)
Medio – Web Design Agency Template
A clean and minimal Bootstrap 5 website template perfect for web design agencies or digital marketing.
Check it out
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_chat.jpg)
AESON
Welcome to AESON, a futuristic (and creepy) chatroom in WebGL. The project was made at Gobelins Paris during a workshop. By Thoma Lecornu. Read more about it in this tweet.
Check it out
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_medusa.jpg)
Medusa
In case you didn’t know about it: Medusa is a headless open-source commerce platform.
Check it out
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_dialog.jpg)
How to Implement and Style the Dialog Element
Go in-depth on the native dialog HTML element with this tutorial and learn how to implement a user-friendly, accessible dialog on your website.
Read it
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_yuri.jpg)
Deconstructing the homunculus.jp Distortion with Three.js
Learn how to replicate the pixel river distortion effect seen on homunculus.js using Three.js.
Check it out
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_3dcharacter.jpg)
Creating 3D Characters in Three.js
Are you looking to get started with 3D on the web? In this tutorial we’ll walk through creating a three-dimensional character using Three.js, adding some simple but effective animation, and a generative color palette.
Read it
![Collective 682 item image](https://i7x7p5b7.stackpathcdn.com/codrops/wp-content/uploads/2021/10/C682_websites.jpg)
Inspirational Websites Roundup #30
A roundup of creative websites collected over the past couple of weeks that stand out with their great design and interactivity.
Check it out