Collective #629

Inspirational Website of the Week: Glenn Catteeuw
A unique portfolio design with lots of interesting details and cool effects. Our pick this week.
Get inspired
Exploring Livestream Chat UX: Threads and Replies
Threads help livestream chats stay organized and clean.

Thinking Outside the Box with CSS Grid
In this great tutorial, Alex Trost breaks down three unconventional CSS Grid powered layouts.
Read it
Responsive Height Design
A great article by Ahmad Shadeed on how to make sure responsiveness works for the height of a layout.
Read it
Hands-Free Coding
Josh W Comeau shares his workflow where he almost exclusively uses a microphone and an eye-tracker.
Read it
How to build a progressively enhanced accordion component with vanilla JS
Chris Ferdinandi shows how we can replace the need for a big plugin by progressively enhancing HTML to add a bit more functionality to it.
Read it
CSS Game: Build a lighthouse
Join the challenge to build a lighthouse in this pure CSS game made by Ben Evans.
Check it out
Getting dicey – how I failed to write a perfect dice throw simulator and how that is totally OK
Christian Heilmann shares how he developed a Dice Throw Simulator.
Read it
The most useful accessibility testing tools and techniques
In case you missed it: Learn about tools and techniques for accessibility testing. By Artem Sapegin.
Read it
The good line-height
A tool that gives you the right line-height for every text size in a specific scale.
Check it out
The lang attribute: browsers telling lies, telling sweet little lies
A very interesting read on how an Austrian news site got into trouble because of a wrong attribute.
Read it
Harlem
Simple, unopinionated, lightweight and extensible state management for Vue 3.
Check it out
Checka11y.css:
A CSS stylesheet to quickly highlight a11y concerns by Jack Domleo.
Check it out
How to Learn JavaScript If You're a Beginner
Some good tips on getting started with JavaScript by Dmitri Pavlutin.
Read it
Animated clip-path slider Concept
A beautiful demo made by Jake Whiteley.
Check it out
I want my own media queries in browsers
Kilian Valkhof writes how great it would be for developers to be able to emulate arbitrary media features in the browser.
Read it
Nokia Composer in 512 bytes
Read how to make a tiny oldschool music composer inspired by RTTTL and Nokia Composer. Check out the demo and GitHub repo.
Read it
SVG Favicon Maker
With modern browsers supporting SVG favicon this tool will come in handy to create your own letter or Emoji-based icon.
Check it out
Waveform Visualiser
A wonderful audio visualizer made by Yugam.
Check it out
Image Cropper
A simple JavaScript image cropper demo that does not rely on canvas or SVG.
Check it out
3D CSS Letter Transition
A super cool letter transition demo made by Adam Kuhn.
Check it out
Pure CSS Product Card
Adam Kuhn made this fun product card with some magic CSS.
Check it out
Inspirational Websites Roundup #19
A new roundup of our favorite inspirational websites that stand out in design and creative interactivity.
Check it out