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
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
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
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