Collective #682
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
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
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
The State of CSS Survey
The annual survey about the latest trends in CSS.
Check it out
Atropos
Atropos is a lightweight, free and open-source JavaScript library to create touch-friendly 3D parallax hover effects.
Check it out
React Preview
React Preview helps you preview any React component in your codebase.
Check it out
A Guide To CSS Debugging
Stephanie Eckles shows how to go about debugging in CSS, exploring techniques to prevent bugs altogether.
Read it
Conditional Border Radius In CSS
Ahmad Shadeed writes about how to use CSS comparison functions to create a conditional border radius.
Read it
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
Designing Accordions: Best practices
Roman Kamushken shares some accordion samples, templates, and UX cases for a smooth experience.
Read it
The Andrei Sakharov Museum
A great storytelling experience with an amazing design.
Check it out
CSS Gradient Editor
Beyond CSS gradients, this generator also has interesting patterns powered by gradients.
Check it out
Audio-reactive visual with Three.js
A beautiful audio-reactive demo created by Francesco Michelini using ThreeJS.
Check it out
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
Tidy Viewer
Tidy Viewer is a cross-platform CLI CSV pretty printer that uses column styling to maximize viewer enjoyment.
Check it out
Medio - Web Design Agency Template
A clean and minimal Bootstrap 5 website template perfect for web design agencies or digital marketing.
Check it out
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
Medusa
In case you didn't know about it: Medusa is a headless open-source commerce platform.
Check it out
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
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
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
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