The Collective #898
Your weekly digest of dev & design links
Codrops Publication
February 10, 2025
In partnership with
Olá, frontend friends! 👋
Here’s a fresh digest of our latest Collective news!
We’ve gathered some of the most interesting links and resources from the past week to inspire and inform you. We hope you discover something new and exciting!
Happy exploring! 💙
From our sponsor
Get Booked on 3.8 Million Podcasts Automatically
Stop wasting time – 2025 is going by fast. If you finally want to be a regular podcast guest in your industry, PodPitch.com will make it happen. Even the beehiiv team uses it!
Imagine snapping your fingers & getting booked on the exact podcasts your customers are already listening to…
With PodPitch.com, it takes 60 secs to start emailing tons of podcast hosts to pitch YOU as the perfect next guest.
Sync your email address
Load in your brand info
Click "go"
Now, you've just automated thousands of personalized emails pitching YOU as the PERFECT next podcast guest. Sit back and relax as you watch the emails send out from your email address.
Big brands like Feastables, Jack Links, and hundreds more are already using PodPitch.com instead of expensive PR agencies.
PodPitch.com is so confident in their tech that they'll give you a FREE Starbucks gift card if PodPitch.com isn't the most impressive 20 minute demo you've ever seen.
Ready to make 2025 your year?
Bramus shares how CSS Custom Functions, now prototyped in Chrome, will enable dynamic, parameterized styles. Test it in Canary!
article / css
Chrome 133 adds scroll-state() queries to CSS, enabling style changes for sticky, snapped, and scrollable elements without JavaScript.
article / css
Tim O’Reilly explores how AI will transform programming, creating new roles and skills, rather than replacing software developers.
ai / article / software-engineering
Simplify Three.js TSL Node code with vite-plugin-tsl-operator, enabling math operators for cleaner, more readable shaders.
three-js / tsl
Learn how to optimize ::view-transition-group(*) animations for better performance by running them on the compositor, using custom FLIP keyframes when dimensions remain unchanged.
css / tutorial
Master Git with Beej's Guide! Available in multiple formats with syntax highlighting and open-source access.
git / github / tutorial
A lightweight library for building 3D apps in React. It supports physics, pointer events, and a built-in scripting API. Read more on their blog.
3d / physics / react
Learn GPU shader programming with GLSL by animating Rick from Rick and Morty—240 lines of code, no libraries, fully interactive examples!
glsl / tutorial
Simulating water over terrain using the virtual pipes method. Covers fluid flow, grid-based models, and practical game development applications.
fluid / game-development / tutorial
A CSS-powered voxel editor for building 3D models with HTML cuboids. Create and customize shapes right in your browser!
3d / css / tool
From our sponsor
Think you already understand AI? Building applications powered by generative AI is a whole new frontier—and it’s quickly becoming an essential skill for 2025. Step into The AI Engineer Path, a practical course for web developers ready to build real-world AI-powered apps. No complex research—just hands-on projects that position you for one of the most in-demand roles of the next decade. Check it out
Flatlogic open-sourced 28 premium web & mobile templates after 12 years in business. Grab the code here
react / template / vue-js
🌐 httptap
A lightweight Linux tool that lets you view HTTP and HTTPS requests made by any program without needing root access or system changes, using network namespaces and TUN devices for traffic interception.
networking / tool
This article explains Jakob Nielsen's ninth usability heuristic on helping users recognize, diagnose, and recover from errors.
article / usability
This article breaks down a 192-byte JavaScript WebAssembly compiler, offering a step-by-step guide to understanding both compact code tricks and WebAssembly internals.
wasm
Jim Fisher reveals how a simple CSS animation can quietly drain your CPU and GPU, and shares practical tips on identifying and optimizing performance-hungry animations using browser dev tools.
article / css / performance
Shota Matsuda unveils a WIP ray-marched volumetric cloud system with interactive controls, still in development and awaiting further tuning.
three-js
Vladimir Dementyev explores running a full-stack Ruby on Rails application entirely in the browser using WebAssembly.
ruby-on-rails / tutorial / wasm
🌬️ Opera Air
A new browser designed to promote mindfulness and mental well-being... Take a “deep breath” before you start doomscrolling ;)
browser
This article explores modern GIF alternatives, their performance, and evolving browser support.
article / gif / image-processing / performance
Aleksandr Hovhannisyan explains how to use Prism.js with markdown-it for syntax highlighting, adding line numbers, file names & copy buttons.
javascript / markdown / tutorial
An interactive fluid simulation rendered in ASCII—featuring device motion support, custom obstacle interactions, and dynamic character mapping for unique visuals. Source code here.
animation / ascii
From our sponsor
Learn AI in 5 minutes a day
What’s the secret to staying ahead of the curve in the world of AI? Information. Luckily, you can join 1,000,000+ early adopters reading The Rundown AI — the free newsletter that makes you smarter on AI with just a 5-minute read per day.
⚡ Fusion
Aaron Francis introduces Fusion, a new way to write PHP inside Vue & React components in Laravel, enabling seamless backend-frontend sync.
javascript / laravel / php / react / vue-js
Andrew Woan's beginner-friendly tutorial on creating a 3D room portfolio with Three.js and Blender. Video here.
blender / three-js
A deep dive into post-processing shaders—Maxime breaks down techniques for dynamic pixel effects, illusions, and creative rendering.
article / ascii / glsl / three-js / webgl
Florian Schroiff explores ARIA alerts, guiding developers on best practices to ensure accessible, screen reader-friendly web notifications.
accessibility / article
Thorsten Seyschab’s gltf-type-toolkit auto-generates TypeScript types for glTF models, ensuring type safety, efficient bundling, and seamless Three.js integration.
three-js / webgl
Goose is an open-source AI agent that automates coding tasks locally, running any LLM for execution, testing, and debugging.
ai / tool
Mike Bespalov’s ASCII Converter—Instantly turn any image into ASCII art. A technical yet functional tool, with plans for a cleaner UI in the future.
ascii / tool
Sahil Lavingia argues AI is making design engineers obsolete, as top designers and engineers now use AI to bridge skill gaps and specialize.
ai / discussion
Alex MacArthur explores various methods to break up long, resource-intensive tasks in JavaScript, improving UX by ensuring responsiveness through different event loop techniques.
article / javascript / performance
Jean Mazouni’s Infinite Vortex Art Gallery—An interactive 3D experience using Three.js Instanced Mesh API + shaders. Scroll to navigate the endless spiral.
3d / three-js
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.