The Collective #894

Here’s a fresh digest of our latest Collective news!

We hope you enjoy exploring the curated links we've gathered over the past week and discover something new and exciting!

Happy exploring! 💙

^{From our sponsor}

Drowning In Support Tickets? Maven AGI is here to help.

Maven AGI platform simplifies customer service by unifying systems, improving with every interaction, and automating up to 93% of responses. Seamlessly integrated with 50+ tools like Salesforce, Freshdesk, and Zendesk, Maven can deploy AI agents across multiple channels—text, email, web, voice, and apps—within days. Companies like Tripadvisor, ClickUp, and Rho slash response times by 60%, ensuring quicker support and exceptional customer satisfaction. Don’t let support tickets slow you down

Request a free personalized demo today.

🖥️ What’s involved in getting a “modern” terminal setup?

Julia Evans outlines key components of a "modern" terminal setup, offering practical tips for shell, terminal emulator, and editor configurations while addressing common challenges.

^{article / software-engineering / terminal}

🎨 Updates to the customizable select API

Una Kravets shares updates on the customizable select API, detailing recent changes to pseudo-elements, styles, and functionality, with demos showcasing its potential for flexible and interactive web design.

^{article / css / ui-components}

♿ Accessibility essentials every front-end developer should know

A blog post covering essential accessibility practices for front-end developers, focusing on techniques to create inclusive and user-friendly web experiences.

^{accessibility / article}

📜 ECMAScript feature: import attributes

An overview of the ECMAScript 2025 "Import Attributes" feature, enabling imports of non-JavaScript artifacts like JSON and CSS, with syntax and use cases.

^{article / javascript}

🕹️ Matt Kane’s Retro HyperCard-Inspired Website

Matt Kane's revamped website adopts a retro "HyperCard on Mac System 6" aesthetic, built with Astro and inspired by 1990s hypermedia design; the source is available on GitHub.

^{astro / retro}

📘 Open source all the way down: Upgrading our developer documentation

Cloudflare details its migration of developer documentation to the Astro framework, enhancing scalability, user experience, and collaboration, while reinforcing its commitment to open source principles.

^{astro / documentation / open-source / tool}

✒️ Shaping Ligatures in Monospace Fonts

Josh Leeb-du Toit discusses the complexities of text rendering in monospace fonts, particularly the handling of ligatures and the discovery of "ligature spacer" glyphs.

^{article / typography}

🛠️ Factorio Blueprint Visualizer

A tool to visualize Factorio blueprints as SVGs, enabling customization, pen plotting, and integration into creative workflows.

^{generative-art}

🧩 Tetris in a PDF

This showcases a Tetris game built entirely within a PDF, using annotations and JavaScript in modern PDF engines like PDFium and PDF.js. More info here. Find the source code here.

^{interactive-games / javascript / pdf}

🌈 Interactive CSS Color Mix() helper function

A demo showcasing CSS mix() for creating and comparing smooth color-mixed gradients with standard ones.

^css

🖌️ NeuralSVG: An Implicit Representation for Text-to-Vector Generation

NeuralSVG is a neural network tool that generates editable vector graphics from text prompts, enabling dynamic control over color, aspect ratio, and layered structure.

^{ai / svg}

📦 View Transitions Snippets

Bramus explains how to track old and new element positions during view transitions using JavaScript's getBoundingClientRect, addressing browser quirks and keyframe issues.

^{tutorial / view-transitions}

📝 CSS Wish List 2025

Eric Meyer’s 2025 CSS Wish List highlights features like custom media queries, masonry layout, and expanded attribute support to enhance web development.

^{article / css / web-trends}

🏗️ A simple masonry-like composable layout

Andy Bell outlines a flexible, composable approach to creating a masonry-like layout using CSS, leveraging progressive enhancement and fallback strategies while awaiting full browser support for native masonry.

^{css / masonry / tutorial}

📖 Browser adaptation

An exploration of using the browser as a dynamic storytelling medium, showcasing interactivity, personalization, and a prototype adaptation of The Lord of the Rings.

^{article / browser / inspiration / storytelling}

⚙️ AdminForth

A free and open-source Node.js and Vue.js framework for rapidly building customizable admin panels with Tailwind, offering features like CRUD generation, Vue components for customization, plugins, and modern back-office tools.

^{node-js / tailwindcss / template / tool / ui-components / vue-js}

^{From our sponsor}

Writer RAG tool: build production-ready RAG apps in minutes

RAG in just a few lines of code? We’ve launched a predefined RAG tool on our developer platform, making it easy to bring your data into a Knowledge Graph and interact with it with AI. With a single API call, writer LLMs will intelligently call the RAG tool to chat with your data.

Integrated into Writer’s full-stack platform, it eliminates the need for complex vendor RAG setups, making it quick to build scalable, highly accurate AI workflows just by passing a graph ID of your data as a parameter to your RAG tool.

Learn more about our production ready RAG tooling here.

🛒 21st.dev

An open-source community registry for React UI components, allowing developers to publish and install minimal Tailwind and Radix UI components using streamlined commands and a variety of modern tools like Supabase, Clerk, and Cloudflare.

^{react / resource-directory / tailwindcss / tool / ui-components}

📐 Shape Mapper

An open-source projection mapping library built on the Processing framework, supporting features like multi-projector setups, face masking, and multi-object mapping.

^{3d / processing / projection-mapping}

🌟 2024 JavaScript Rising Stars

JavaScript Rising Stars 2024 highlights top GitHub projects such as shadcn/ui, Excalidraw, and htmx, along with trends in frameworks, tooling, state management, and AI-powered development tools.

^javascript

🕺 InstancedMesh2: Skeletal Animation for Efficient Instance Rendering

InstancedMesh2 now supports skeletal animation, enabling efficient rendering of thousands of animated instances. A demo showcasing 3,000 instances in action is available here. Perfect for performance-focused Three.js and WebGL projects.

^{three-js / webgl}

🔒 Double-keyed Caching: How Browser Cache Partitioning Changed the Web

Addy Osmani highlights cache partitioning's shift towards privacy by isolating cache entries by site and URL, increasing security but raising performance costs, with strategies like domain consolidation and self-hosting to adapt.

^{article / performance / privacy}

🎵 Synthesizing Music from JSON

Dominic Szablewski's pl_synth is a compact C and JavaScript synthesizer with a tracker for composing efficient, self-contained music files, optimized for small games and compact outputs.

^{article / javascript / json / synthesizer}

🤖 How I program with LLMs

David Crawshaw details a year with LLMs, highlighting their impact on programming productivity, workflows, and testing, and introduces sketch.dev, a Go-focused LLM-integrated coding platform.

^{ai / article}

♟️ A 2-ply minimax chess engine in 84,688 regular expressions

Nicholas Carlini's Regex Chess uses 84,688 regular expressions to create a quirky and fascinating chess engine, blending humor with creative programming.

^{article / chess / regular-expressions / satire}

🎄 Christmas 2 Challenge

Explore creative festive 3D projects and vote for your favorites—votes are anonymous, you can select multiple entries (including your own), and the final results will be revealed once voting ends.

^{christmas / three-js / webgl}

🕹️ Stimulation Clicker

A minimalist and humorous online clicker game where players increase their "stimulation" count by clicking and unlocking upgrades, satirizing the addictive mechanics of clicker games.

^{interactive-games / satire}

✨ :hover > :not(:hover), sorry not sorry

This article explores "focus by demotion" in CSS, showcasing creative techniques like fading and scaling non-hovered elements, advanced hover effects using :has() and custom properties, and how these approaches reduce visual clutter and enhance user focus.

^{css / tutorial}