The Collective #902: Dynamic Colors, 3D Portfolios, and Cache-Control Insights

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

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

🎨 Relative Colors

Ahmad Shadeed explains how to dynamically modify colors in CSS using relative colors, covering syntax, use cases, and accessibility benefits.

^{article / css}

🏠 Create a Home Office Portfolio with Three.js and Blender

Andrew Woan showcases how to build a home office portfolio using Three.js and Blender, covering 3D website routing, rapid prototyping, and interactive elements.

^{3d / blender / three-js / tutorial / video}

📡 Why Do We Have a Cache-Control Request Header?

Harry Roberts explores the often-overlooked Cache-Control request header, explaining its role in refresh behavior, revalidation, and real-world use cases.

^{article / performance}

🐧 A Quick Journey Into the Linux Kernel

An interesting look at key Linux kernel concepts, from process scheduling to system calls, with practical insights from kernel development.

^{article / linux / operating-systems}

🎨 MoodHue

Thalles Lopes introduces MoodHue, an AI-powered app that generates color palettes based on mood. Built with React and React Three Fiber.

^{ai / react / tool}

📊 GSAP ScrollTrigger Visualizer

A useful tool for GSAP users to better understand ScrollTrigger behavior.

^gsap

📝 CSS Form Control Styling Level 1

An unofficial draft for CSS Form Control Styling, defining new ways to style form controls with standardized pseudo-elements and properties.

^css

🧑‍💻 Circle

Leonel Ngoya introduces Circle, an open-source project management template inspired by Linear. Built with Next.js and shadcn/ui, it helps track issues, projects, and teams.

^{next-js / template / typescript / ui-components}

💬 prompt-kit

Customizable components for building AI interfaces, including features like prompt inputs and messaging elements.

^{ui-components}

🧠 My experiments with WASM and OpenGL

Uddeshya experiments with WASM and OpenGL, tackling performance, rendering challenges, and debugging in an attempt to render 1M spheres at 60 FPS.

^{glsl / performance / tutorial / wasm / webgl}

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

Sign up to start learning.

🔄 View Transitions Applied: Dealing with the Snapshot Containing Block

Bramus explores View Transitions, highlighting coordinate space issues and solutions for smoother animations in web development.

^{css / tutorial}

🔙 Why we ditched Next.js and never looked back

Northflank discusses their switch from Next.js to a custom SSR solution, leading to faster load times, improved SEO, and better control over their tech stack.

^{article / next-js}

🔑 In Defense of Text Labels

Christopher Butler makes the case for the importance of text labels in UX design, highlighting how they improve clarity and reduce cognitive load compared to relying solely on icons.

^{accessibility / article}

🖋️ User-Interface Elements: Glossary

This glossary provides quick definitions for key user-interface elements and controls commonly used in UX research and design.

^{ux / web-design}

📊 Hyper-personalization: a practical UX guide

The article discusses hyper-personalization in UX design, focusing on its evolution, key components, and the role of data in creating tailored, engaging user experiences.

^{article / ux}

🎮 three-pinata

Dan Greenheck announces the official release of Three Piñata, an open-source Three.js library for slicing, smashing, and exploding 3D meshes in real time. Check it out on GitHub here and npm here.

^{3d / three-js}

📱 Chrome on Android edge-to-edge migration guide

Bramus explains Chrome 135's new edge-to-edge behavior on Android, detailing how websites can adapt for full-screen display and handle safe area insets.

^{tutorial / web-design}

🔲 Is the button focusable?

Manuel Matuzović tests different HTML and CSS methods to hide a button, exploring which remain focusable and exposing potential accessibility issues.

^{accessibility / article / css}

🧑‍💻 Scroll Buddy

A fun little experiment adds an animated stick figure that walks along the scrollbar as users scroll, with plans for more characters like a skateboarder or climber.

^{css / javascript}

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