The Collective #908: Customizing shadcn/ui, GLSL Shaders in Practice, Post-Developer Era

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}

🎁 Free Gift Sent to Your Door + No CIAM Pain? Yes!

Join our Frontegg demo on April 29 at 2 PM ET to learn how you can offload CIAM work like auth flows and user roles. See how you can get back to coding and building—and get a free 3-in-1 charging station just for attending.

Save your seat today!

🏆 GSAP Site of the Week: Siena Film Foundation

GSAP's Site of the Week is the Siena Film Foundation website, featuring a smooth film carousel and innovative ticket menu animations.

^{gsap / web-trends}

💡 So you want to use Object Storage

Tips and lessons learned from building systems using object storage, focusing on strategies to manage latency, improve performance, and optimize costs in cloud-based systems.

^{article / software-engineering}

🖥️ Sidekick-CLI

An open-source, agentic command-line interface AI tool that allows users to integrate various LLM providers and customize workflows.

^{ai / terminal / tool}

🎨 tweakcn

A visual theme editor that allows users to easily customize shadcn/ui components with real-time previews.

^{tool / ui-components}

⚡ 5 Ways to Reduce HTML File Size on Your Website

Anna Monus provides five best practices for reducing HTML file size on websites to improve web performance, including minification, compression, breaking up long pages and more.

^{article / performance}

🔧 Curvy slider with Three.js postprocessing distortions

Yuri Artiukh explores the Three.js and WebGPU TSL postprocessing pipeline while recreating the stunning slider from the Kaide website.

^{three-js / tsl / tutorial / video / webgl}

🎎 Japanese Gradients

Nuevo.Tokyo™ is offering a free version of their JAPANESE GRADIENTS [FOR UI]™ design pack on Figma, part of their ongoing project blending traditional Japanese color aesthetics with modern UI design.

^{design-resource / web-design}

🎮 Getting Started with Shader Functions (step, mix, smoothstep)

Romain Herault dives into step, mix, and smoothstep in GLSL shaders, with live editors, challenges, and interactive examples for shader beginners.

^{glsl / tutorial / webgl}

💬 How to write error messages that actually help users rather than frustrate them

Amy Hupe shares how to write clear, empathetic error messages that help users recover instead of leaving them confused or frustrated.

^{accessibility / article / ux}

🕹️ React miami

A browser-based multiplayer game made for React Miami Conf by Matias Fernandez using PartyKit and PeerJS. Everyone joins the same room — madness guaranteed. Source code here.

^{interactive-games / partykit / peerjs / react / three-js}

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

📊 Design Meets Data: Rive Launches Powerful Data Binding for Seamless UI Workflows

Rive, the real-time design and animation tool, has launched Data Binding—letting designers visually connect UI to live data without complex dev handoffs.

^{animation / rive / tool}

🔴 Why do AI company logos look like buttholes?

Radek Sienkiewicz roasts the AI industry’s logo obsession with circular, gradient-filled “butthole” designs—and yes, there’s a serious design critique too.

^{branding / opinion}

🌈 The customizable select – Part two: Potions, anchoring, and radial shenanigans in CSS

Brecht De Ruyte explores CSS anchor positioning to create a radial potion picker with customizable selects and animated styling tricks.

^{css / tutorial}

📡 JSX Over The Wire

Dan Abramov explores how React Server Components enable server-defined UI with co-located data, replacing REST with component-shaped JSON.

^{article / jsx / react}

🔄 Advanced React in the Wild

Addy Osmani & Hassan Djirdeh dive into advanced, real-world React/Next.js case studies, showing how top teams optimized performance and UX.

^{article / next-js / performance / react}

🔬 The Lab by Anderson Moss

Anderson Moss launches The Lab — a new WebGL-powered 3D playground for motion and interaction experiments, packed with clever video texture tech.

^{3d / three-js / webgl}

🤖 The Post-Developer Era

Josh Comeau reflects on his 2023 predictions, arguing that despite AI advances, human devs are still essential—and not going anywhere.

^{ai / opinion}

Got something you’d like to share? Just reply to this email and let us know!