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