The Collective #907: HTML Dialogs in Practice, Custom CSS Functions for Modern Browsers, WebGL Gradients
Your weekly digest of dev & design links
Codrops Publication
April 14, 2025
Olá, frontend friends! 👋
Here’s a fresh roundup of the latest frontend news, links, and resources to inspire and inform you. Whether you're looking for new ideas or just something interesting, we hope you'll discover something exciting in this edition!
Happy exploring! 💙
P.S. We've been hosting Codrops with Liquid Web for almost a decade now—super reliable and solid support. Highly recommended.
From our sponsor
Penpot is the only tool to offer native design tokens—a single source of truth for collaboration between design and code. You can apply tokens to elements like dimensions, opacity, border radius, and more, organizing them into themes and sets. As an open-source design tool, Penpot follows the most standardized approach to design tokens: Exchange tokens between tools! This feature was developed in collaboration with Tokens Studio by Hyma.
Aleksandr Hovhannisyan shows how to open and close <dialog> with JS or HTML-only methods, supporting modals, non-modals, and light dismiss.
accessibility / javascript / tutorial
GSAP's Site of the Week, Elegant Seagulls, showcases slick ScrollTrigger, Three.js, and WebGL with super creative execution and loads of polished details.
gsap / web-trends
Otakar G. Hubschmann critiques the mimicry of Gen AI, using Ghibli-style images and IP-dodging prompts to explore how models copy iconic characters while stripping away the soul.
copyright / creativity / ethics / opinion
Kamil Stanuch built a tool that brings back the ’90s web — turning any modern site into a chaotic, glittery Geocities-style masterpiece.
css / nostalgia / tool
Alex Harri walks through the creation of a WebGL gradient using shaders, simplex noise, and smart layering.
animation / glsl / tutorial / webgl
From our sponsor
Asking for the same file three times? Losing links like socks in the dryer? Stockpress gives you one clean space to find, organize, and share files—without losing your mind (or your assets).
Yuri Artiukh dives into Bezier curves and shaders to recreate a vortex animation in Three.js using TSL, live on YouTube.
glsl / three-js / tsl / tutorial / video / webgl / webgpu
Adam Argyle shares the shock and heartbreak of being suddenly laid off from Google, despite years of impactful work on Chrome and the web platform.
article
Miriam Suzanne introduces Custom CSS Functions, now in Chromium Canary, enabling author-defined logic like parameters, conditionals, and reusable styles.
article / css
Simon Pieters explains upcoming changes to default browser styles for nested <h1> elements and how to avoid Lighthouse warnings with explicit CSS.
accessibility / article / css
Alex Moulinneuf brings Mario vibes to react-three/fiber. A full 3D controller with juice. Source here.
3d / react / three-js
Vladislav Penev built a math-driven 3D renderer. Type an equation, see the surface take shape—no code, just math.
3d / math / three-js
Dan Abramov explores React's dual-computer model in deep dive on tags, time, and space.
javascript / opinion / react
Jen Simmons introduces text-wrap: pretty, a new CSS property in Safari TP 216 that brings typographic finesse to web text by improving line wrapping.
css / typography
From our sponsor
Start learning AI in 2025
Keeping up with AI is hard – we get it!
That’s why over 1M professionals read Superhuman AI to stay ahead.
Get daily AI news, tools, and tutorials
Learn new AI skills you can use at work in 3 mins a day
Become 10X more productive
A thoughtful reflection on the traits of exceptional programmers—deep tool knowledge, humility, problem-solving, communication, and lifelong learning.
devculture / opinion / productivity
Browser MCP lets AI apps automate browser tasks—form filling, testing, navigation—by connecting directly to your local browser.
ai / browser / tool
Luke Plunkett shares firsthand accounts from game devs struggling with AI forced into their workflows—frustrating, demoralizing, and often creatively hollow.
ai / creativity / ethics / game-development / opinion
An extensive directory of open source and premium themes, templates, starters & UI kits for the Jamstack.
resource-directory
🎠 Smooothy
Federico Valla’s Smooothy is a lightweight, extensible JS slider with snapping, parallax effects, and smooth interactions. Framework-agnostic.
javascript / library / ui-components
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.