Collective #732

Inspirational Website of the Week: Angello Torres
The portfolio of Angello Torres will pamper you with lovely details and creative typography.
Get inspired

Our Sponsor
Fully Managed Cloud & Web Hosting
Codrops’ host of choice since 2016 is Liquid Web because they provide an unrivaled hosting experience, delivering 99.999% uptime and 24/7 heroic human support.
Check it out

State of CSS
The annual developer survey about the latest trends in CSS. Read this article by Lea Verou to learn more about it.
Check it out

Use cases for CSS comparison functions
A look at some different use-cases for min(), max(), and clamp(). By Ahmad Shadeed.
Read it

WebGL Scrolling Animations
Daniel Velasquez writes about scrolling through satisfying WebGL animations in this latest issue of Offscreen Canvas.
Check it out

6+5 ways to make a two-column layout: from pretty reasonable to completely wrong
Vadim Makeev’s in-depth exploration of creating a two-column layout.
Read it

Locomotive-scroll and Lenis
Read this Twitter thread by Quentin Hocdé on how and why he merged locomotive-scroll and Lenis.
Check it out

kill-sticky
Bookmarklet to remove sticky elements and restore scrolling to web pages.
Check it out

When going somewhere does a thing: on links and buttons
In this article Kilian Valkhof explores the roles of buttons and links.
Read it

Three.js Shield Shader
A really cool shield shader made in Three.js by Francesco Michelini.
Check it out

58 bytes of CSS to look great nearly everywhere
A fantastic Gist of some very useful CSS to make a page look great.
Check it out

Drawing a star with DOMMatrix
Jake Archibald shows how to use DOMMatrix for drawing shapes.
Read it

js13kGames 2022 winners
Find out who the winners of the eleventh annual js13kGames coding competition are.
Check it out

I turned JS into a compiled language (for fun and Wasm)
Surma writes about the journey of transpiling JavaScript to C++.
Read it

Guitar Chords: Diagrams with Notes & Finger Positions
Get guitar chord diagrams for a whole lot of popular chords at different positions on the fretboard. The chord diagrams show finger positions and note names.
Check it out

LocatorJS
In case you didn’t know about it: An extension that allows to click on an UI Component in the browser and open its code in your IDE.
Check it out

SVG Animals
An amazing collection of SVG animals made with triangula by Olivier Blanc based on his photographies.
Check it out

Nerfstudio
Nerfstudio provides an API that allows for a simplified end-to-end process of creating, training, and testing NeRFs.
Check it out

Into the Woods
A super cool interactive experience with amazing graphics.
Check it out

Meta balls + drei + react-three/rapier
Paul Henschel about pairing meta balls with react-three/rapier. See the demo here.
Check it out

The Illustrated Stable Diffusion
A great visual explainer by Jay Alammar on how Stable Diffusion works.
Read it

From Our Blog
Animating Tiny Triangles with Three.js
A video coding session where you’ll learn how to animate tiny triangles to create a whirlwind-like dissolving effect in Three.js.
Check it out

From Our Blog
On-Scroll Animation and View Switch
A layout with some scroll animations and a view switch where the content item images animate to a grid.
Check it out