The Collective #907
HTML Dialogs, Custom CSS Functions, WebGL Gradients!
Welcome to The Collective! Your weekly dose of RADICAL web dev and design goodness!
Olá, frontend friends! Here’s a fresh roundup of the latest frontend news, links, and resources to inspire and inform you. 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, the only tool with built-in design tokens.
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.
Article Description Tags
How to Open and Close HTML Dialogs
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 Site of the Week: Elegant Seagulls
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
Gen AI Mimicry
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
GeoCities Time Machine!
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
Flowing WebGL Gradient
Alex Harri walks through the creation of a WebGL gradient using shaders, simplex noise, and smart layering. animation / glsl / tutorial / webgl
From our sponsor
What if file sharing actually made sense?
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).
Start now - It's Free.
Article Description Tags
Bezier curves and shaders for Three.js vortex animation
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
G̶o̶o̶g̶l̶e̶r̶… ex-Googler 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
Custom CSS Functions in the Browser
Miriam Suzanne introduces Custom CSS Functions, now in Chromium Canary, enabling author-defined logic like parameters, conditionals, and reusable styles. article / css
Default styles for h1 elements are changing
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
Mario-style 3D Controller for react-three/fiber Alex Moulinneuf brings Mario vibes to react-three/fiber. A full 3D controller with juice. Sourcehere. 3d / react / three-js
More Great Content!
Article Description Tags
Equation Space Vladislav Penev built a math-driven 3D renderer. Type an equation, see the surface take shape—no code, just math. 3d / math / three-js
React for Two Computers Dan Abramov explores React's dual-computer model in deep dive on tags, time, and space. javascript / opinion / react
Better typography with text-wrap pretty Jen Simmons introducestext-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
Sign up and start mastering AI
Article Description Tags
The Best Programmers I Know
A thoughtful reflection on the traits of exceptional programmers—deep tool knowledge, humility, problem-solving, communication, and lifelong learning. devculture / opinion / productivity
Browser MCP
Browser MCP lets AI apps automate browser tasks—form filling, testing, navigation—by connecting directly to your local browser. ai / browser / tool
‘An Overwhelmingly Negative And Demoralizing Force’
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
Built At Lightspeed An extensive directory of open source and premium themes, templates, starters & UI kits for the Jamstack. resource-directory
UI Goodness!
Article Description Tags
Smooothy
Federico Valla’s Smooothy is a lightweight, extensible JS slider with snapping, parallax effects, and smooth interactions. Framework-agnostic. javascript / library / ui-components
Got something you’d like to share? Just reply to this email and let us know!
Codrops is proudly sponsored by KeyCDN, the high performance content delivery network that has been built for the future.
Under Construction New! Generate your own 90s page here! Under Construction