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.
Read more

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