The Collective #896

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}

Here’s Why Over 4 Million Professionals Read Morning Brew

• Business news explained in plain English

• Straight facts, zero fluff, & plenty of puns

• 100% free

See for yourself

🤖 Open Operator

Open Operator is a proof-of-concept platform by Browserbase that integrates Browserbase, Stagehand, and OpenAI technologies to help users build their own web agents for automating browser-based tasks.

^ai

💧 Drops

Drops is a real-time fluid simulation using WebAssembly and SPH, showcasing caustics, refractive effects, and interactive parameters in browsers for stunning visuals.

^{fluid / haxe / physics / wasm / water / webgl}

🎮 cs16.css

cs16.css is a CSS library that brings a nostalgic gaming interface from Counter Strike 1.6, easily integrated into your web projects for a retro feel.

^{css / retro}

🕒 JavaScript Temporal is coming

JavaScript's new Temporal object simplifies date and time handling, offering better support for time zones, calendars, durations, and precise calculations.

^{article / javascript}

🌟 Styling a meter element with CSS and SVG

Mike Aparicio demonstrates how to style a <meter> element using CSS and SVG, creating a flexible rating component with custom icons and scalable options.

^{css / svg / tutorial}

👕 Lacoste Customization Tool by Merci-Michel

Lacoste's new real-time polo customizer in Three.js offers endless color, pattern, and detail options, allowing you to design your ideal polo shirt online.

^three-js

🎨 Surface-Stable Fractal Dithering: A Novel 3D Rendering Technique

An innovative 3D rendering technique by Rune Skovbo Johansen that creates adaptive dot patterns on surfaces, maintaining visual consistency across different perspectives. Explanation here.

^{3d / dithering}

💻 Creation

A quantum mechanics student shares how he built an open-source laptop from scratch with a 4K AMOLED display, mechanical keyboard, custom powertrain, and modular design.

^{article / open-source}

⭐ Single HTML Element Star Rating Component

A tutorial on creating a customizable star-rating component using HTML, CSS, and minimal JavaScript, exploring innovative ways to build interactive web elements.

^{css / tutorial}

📘 Dropbox Brand Guidelines

Dropbox launches an innovative brand guidelines site with interactive animations, powered by Rive and Webflow, redefining modern web design.

^branding

🌀 Tailwind CSS v4.0

Tailwind CSS v4.0 is a major update focused on faster performance, modern CSS features, and simplified setup.

^tailwindcss

^{From our sponsor}

Your best year starts here

Make 2025 your most successful year yet. Join HoneyBook in January to jumpstart your business with all the tools you need to manage client relationships—Plus a chance to win $10,000 in prizes.

Start a free trial to enter

🛠️ New capabilities for attr()

Una Kravets highlights Chrome 133’s enhanced CSS attr() function, adding type casting and versatile styling uses.

^{article / css}

📊 7 New JavaScript Set Methods for Comparing Arrays

Wes Bos highlights 7 new JavaScript set methods, now available in all browsers and Node.js, perfect for comparing arrays or sets of data.

^javascript

🚀 Moving on from React, a Year Later

Kelly Sutton reviews Scholarly's move from React to a server-rendered stack, praising better speed, testability, and simpler maintenance.

^{article / react}

🖍️ CSS attr() gets an upgrade

Chrome 133 introduces an upgraded CSS attr() that supports more properties, parses data types like <color>, and aids in advanced features like View Transitions.

^{article / css}

🎨 My website has been gaslighting you

Dave Rupert shares how he updates his site’s color scheme daily with CSS variables, hue rotation, and math, blending aesthetics, P3 vibrancy, and accessibility.

^{article / color-theory / css}

🖼️ ASCII Hover effect with shader and post-processing — PART 1

Alexandre Pujol creates an ASCII hover effect with Three.js, React-Three-Fiber, shaders, and GLSL, merging retro ASCII style with modern interactivity.

^{glsl / react / three-js}