The Collective

The Collective has paused, but the inspiration continues. Subscribe to our monthly newsletter for fresh updates.

Claude 3.7 Sonnet and Claude Code

Anthropic introduces Claude 3.7 Sonnet, a hybrid reasoning model for rapid or deep thinking, along with Claude Code, an AI-powered agentic coding tool.

And the river runs

Frank Reitberger’s third WebGPU experiment uses TSL and Three.js to create a real-time water simulation with shaders and procedural rendering.

Hexapod Simulator

An interactive 3D hexapod simulation using Three.js for visualization, inverse kinematics for movement, and smooth spline-based animations.

Shipixen

Website, blog, or product boilerplates. One-click deploy to Vercel. SEO-ready MDX blog with Next.js 14, TypeScript, TailwindCSS, and Shadcn UI.

This page is under construction

A passionate call from Sophie Koonin to reclaim the web’s creativity—build personal sites, embrace individuality, and break free from corporate platforms.

Lessons from an AI-assisted site migration

Tom Bennet shares lessons from migrating Tom’s Carnivores to Astro, where AI streamlined repetitive tasks but struggled with complex coding challenges.

Vietnamese Graphic Design

A growing archive of Vietnamese graphic design, aiming to document and celebrate its history despite limited accessible resources.

Running Pong in 240 Browser Tabs

Nolen Royalty hacks Pong into 240 browser tabs, syncing movement across favicons and canvases while solving throttling and tab communication challenges.

An Emoji Naming Convention

Adam Argyle proposes using emojis in CSS naming for clarity but questions its practicality for readability and accessibility.

Liquid Metal by Paper

Liquid Metal is an open-source tool by Paper that lets you transform your logo into a liquid metal effect, inspired by Apple's design.

Record

Addy Osmani launches Record, a free, open-source browser-based screen recorder with camera support, teleprompter, and MP4 export—no installs needed!

Mastra

A TypeScript AI framework with agents, RAG, workflows, and integrations, enabling fast AI app development with LLM model routing.

How To Use Chrome’s Developer Tools

Matt Zeunert provides a comprehensive guide to Chrome DevTools, covering essential and advanced debugging features for web developers.

Reimagining Fluid Typography

Miriam Suzanne challenges conventional fluid typography, exploring better ways to respect user preferences without relying on pixel-based assumptions.

Prada

MisterPrada's Three.js demo transforms a logo image into interactive particle-based geometry, featuring DOF effects with Simplex Noise.

Navigating the web platform

Patrick Brosset offers a concise cheatsheet for web developers on tracking new web platform features, browser updates, and ways to influence future developments.

Faux Containers in CSS Grids

Tyler Sticka explores "faux containers" in CSS Grid, showing how to create flexible layouts that break free from traditional boxy designs.

Otherlife Labs

Amelie Maia unveils Otherlife Labs, a hub for experimental web design, debuting with a high-fidelity WebGL virtual car showroom.

Build a Product Card with Tailwind CSS

Discover intermediate and advanced styling techniques using Tailwind CSS and craft a fully responsive, professional product card for a web store in this Scrimba course. Codrops readers get 20% off Pro plans!

CSS Space Toggles

Jim Nielsen Explores CSS Space Toggles as a Solution to Light-Dark() Limitations for More Dynamic Theming.

XOR

Deep dive into XOR in logic, computing, and mathematics, covering properties, applications in cryptography, graphics, algorithms, and its role in game theory and algebra.

CSS @function + CSS if() = 🤯

Bramus explores CSS Custom Functions (@function) and the new CSS if() feature in Chrome Canary, showing how they enable advanced, flexible styling.

The Generative AI Con

Edward Zitron argues that generative AI is an overhyped con, fueled by inflated user metrics, media complicity, and corporate greed, with no real breakthrough or profitability in sight.

The hardest working font in Manhattan

Marcin Wichary uncovers the history and cultural impact of the Gorton font, from its industrial origins to its quiet ubiquity in Manhattan, blending history, design, and personal discovery.

Learning web extensions

Chen Hui Jing explores the fundamentals of web extension development, covering manifest files, content scripts, background scripts, and key browser APIs.

How to start a React Project [2025]

Robin Wieruch compares Vite, Next.js, and Astro for React projects, weighing performance, flexibility, and rendering techniques to suit different needs.

trot

Robin Rendle explores switching from web dev to iOS, missing DevTools, loving SwiftUI animations, and rediscovering the joy of making without constraints.

uchū

uchū is a color palette designed for internet lovers, using the OKLCH color space for precise, vibrant colors—crafted by NetOperator Wibby.

StringTune

StringTune is a modular JS library for smooth web effects like parallax, cursor interactions & animations, using a simple, attribute-based approach.

smolmodels

Smolmodels is an open-source Python library for creating machine learning models using natural language and minimal code.

Evaluating overlay-adjacent accessibility products

The article critiques overlay-adjacent accessibility products, highlighting their flaws, ethical concerns, AI reliance, and business models while advocating for built-in browser and OS accessibility features.

Firefox + custom elements + iframes bug

A known Firefox bug causes custom elements to lose their prototype when moved to an iframe. This post explains why it happens and provides a fix using customElements.get() to restore the element’s prototype.

Fast & Smooth Third-Party Web Fonts

Scott Jehl shares a faster way to load third-party web fonts asynchronously while keeping text hidden for up to 3s, improving page speed and UX.

Smuggling arbitrary data through an emoji

Paul Butler explores encoding data in Unicode variation selectors, hiding arbitrary bytes within emojis and text. A clever but abusable Unicode trick.

How to add a directory to your PATH

Julia Evans explains how to add a directory to your PATH across different shells, covering gotchas, debugging, and best practices for bash, zsh, and fish.

Astro 5.3

Astro 5.3 boosts performance with faster page rendering—SSR up to 4x faster. Plus, easier session storage setup and improved Netlify bundling.

Ribbon

A WebGPU-powered physics demo featuring a simulated ribbon using Rapier for physics and Three.js for rendering. Made by Christophe Choffel.

Smuggling arbitrary data through an emoji

Paul Butler shows how Unicode variation selectors can be used to hide data inside a single emoji, with possible applications in watermarking and bypassing content filters.

1 5 6 7 8 9 12