Collective #629
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_WOTW.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/bannerStreamio-1.jpg?x86293)
Exploring Livestream Chat UX: Threads and Replies
Threads help livestream chats stay organized and clean.
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_grid.jpg?x86293)
Thinking Outside the Box with CSS Grid
In this great tutorial, Alex Trost breaks down three unconventional CSS Grid powered layouts.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_height.jpg?x86293)
Responsive Height Design
A great article by Ahmad Shadeed on how to make sure responsiveness works for the height of a layout.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_handsfree.jpg?x86293)
Hands-Free Coding
Josh W Comeau shares his workflow where he almost exclusively uses a microphone and an eye-tracker.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_details.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_lighthouse.jpg?x86293)
CSS Game: Build a lighthouse
Join the challenge to build a lighthouse in this pure CSS game made by Ben Evans.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_dice.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_tools.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_lineheight.jpg?x86293)
The good line-height
A tool that gives you the right line-height for every text size in a specific scale.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_attribute.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_harlem.jpg?x86293)
Harlem
Simple, unopinionated, lightweight and extensible state management for Vue 3.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_check11y.jpg?x86293)
Checka11y.css:
A CSS stylesheet to quickly highlight a11y concerns by Jack Domleo.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_jsbeginner.jpg?x86293)
How to Learn JavaScript If You're a Beginner
Some good tips on getting started with JavaScript by Dmitri Pavlutin.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_layoutclip.jpg?x86293)
Animated clip-path slider Concept
A beautiful demo made by Jake Whiteley.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_mediaqueries.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_composer.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_favicon.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_sound.jpg?x86293)
Waveform Visualiser
A wonderful audio visualizer made by Yugam.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_crop.jpg?x86293)
Image Cropper
A simple JavaScript image cropper demo that does not rely on canvas or SVG.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_transition.jpg?x86293)
3D CSS Letter Transition
A super cool letter transition demo made by Adam Kuhn.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_card.jpg?x86293)
Pure CSS Product Card
Adam Kuhn made this fun product card with some magic CSS.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2020/10/C629_websitesroundup.jpg?x86293)
Inspirational Websites Roundup #19
A new roundup of our favorite inspirational websites that stand out in design and creative interactivity.
Check it out