Collective #621

Inspirational Website of the Week: Elias & Valentin
A very fluid experience on another level of sophistication. Our pick this week.
Get inspired
Website Behavior Analytics Software
Understand how users are really experiencing your site without drowning in numbers!
Try it free
Component Driven User Interfaces
The Chromatic team made this great resource that explores how modularity is transforming design and front-end development and explains what Component Driven UIs are.
Check it out
Shader Studies: Matrix Effect
Shahriar Shahrabi wrote this break down of the matrix shader effect written by Will Kirby and also implemented a real time matrix Shader in Unity 3D with Triplanar mapping.
Read it
Present
A terminal-based presentation tool with colors and effects.
Check it out
Web Brutalism, Seamfulness, and Notion
A very interesting article on how a tool for sensemaking reconciles two distinct software design ideologies.
Read it
Omatsuri
A great place to find open source browser tools for everyday use.
Check it out
Stitches
A CSS-in-JS library with near-zero runtime, server-side rendering and multi-variant support.
Check it out
Building Website Headers with CSS Flexbox
A very practical tutorial on how to code up responsive flexbox-powered website headers.
Read it
Custom bullets with CSS ::marker
Learn how trivial it has become to customize the color, size or type of number or bullet when using lists.
Read it
CSS ART - Vintage VW Bug
A beautiful VW Bug created with CSS only.
Check it out
An Interesting Explanation of async/await in JavaScript
Learn how to use async/await in JavaScript in this article by Dmitri Pavlutin.
Read it
Proportional Resizing with CSS Variables
A very useful snippet by Ahmad Shadeed on how to proportionally control the dimensions of an element.
Check it out
Is the web getting slower?
Is website performance getting worse overall? The team of DebugBear tries to answer the question.
Check it out
To design and develop an interactive globe
Read about Stripe's approach to creating a 1:40 million-scale, interactive 3D model of the earth.
Read it
Increment: APIs
This issue of Increment explores all things APIs—from their prehistory to their future, their design and development to their opportunities and impacts.
Check it out
CSS3D Adventure Game
A 3D game rendered entirely in CSS/HTML. Can you escape the dungeon?
Check it out
Flexbox Defense
The Tower Defense game with a twist: all towers must be positioned with CSS Flexbox!
Check it out
Alt text overlay bookmarklet
Christian Heilmann created a bookmarklet to easily test which images have alternative text and what it is.
Check it out
Creating A Custom Scroll Bar In 24 Lines Of CSS
Have you ever encountered a website with a beautiful scrollbar and thought to yourself “wow, I wish I... Tagged with css.
Check it out
CSS Values
A place to search the syntax and all possible values for any valid CSS property.
Check it out
Diagonal Thumbnail Slideshow Animation
A simple slideshow with tilted thumbnails and large titles that animate when navigating.
Check it out