🎲 Rolling the Dice with CSS random() — Until now there’s not been a way to create a random number directly with CSS — but the random() function is now on the way (and can be tested in the latest version of Safari Technology Preview). You’ll soon be able to create a random animation delay, layout content at a random place on the screen, create a random color, or anything you want — all without any JavaScript.

Davis, Simmons, Nguyen

How to Monitor Your Freshly Minted MCP Server with Sentry — Built an MCP server? Learn how to see who's calling your server, catch broken integrations, and stop bot abuse.

Sentry sponsor

Using the Custom Highlight API — The CSS Custom Highlight API offers a way to style text ranges on a document using JavaScript to create the ranges, and CSS to style them. And, as of Firefox 140, all major browsers now support it. This could be great for in-page search or even dynamic syntax highlighting..

Chris Coyier

You’re Loading Fonts Wrong (and It’s Crippling Your Performance) — Jono provides a bit of background on web fonts and how they work before sharing how best to approach implementing them.

Jono Alderson

Obsessing Over Smooth radial-gradient() Disc Edges — Here’s how to get smooth edge discs with CSS radial gradients. No blurry edges or jaggies even when zooming, all thanks to something of an underdog media query.

Ana Tudor

Designing Chrome's Built-in AI Web APIs — Domenic, a member of the Chrome team at Google, shares some insights into how the APIs around Chrome’s newest AI features were designed.

Domenic Denicola

Making Sense of CSS Length Units — A concise overview of the various CSS length units available to us, explaining the differences between absolute and relative units, their appropriate use cases, along with a look at some of the more niche units at our disposal.

Oded Sharon

Optimizing PWAs for Different Display Modes — Progressive Web Apps are a solid way to make web-based apps feel native, but Declan warns that moving outside a typical browser environment carries with it potential usability issues. Here’s how to mitigate them, depending on what display mode is applied.

Declan Chidlow

What Are OKLCH Colors? — OKLCH is, relatively, one of the newer color models on the block, and its big claim is being much more accurate to the human eye. Here’s a quick primer.

Jakub Krehel

The Making of gradient.style — Adam shares the behind the scenes journey of creating a spec compliant CSS gradient generator. Kinda fun to see the thought process laid out like this.

Adam Argyle

LiftKit: A UI Framework Based on the Golden Ratio — This stands out from other UI frameworks by using a set of relative units for spacing, scaling, and symmetry. This helps avoid natural alignment problems inherent in most systems. More details in the docs.

Chainlift

Ready to Secure Your Backend Service Communication? — Clerk M2M tokens are now available in public beta, authenticating requests between different machines within your backend infrastructure.

Clerk sponsor

Uppy 5.0: A Powerful, Modular JavaScript File Uploader — Upload not just from local sources but also remote services like Dropbox or Instagram. Integrates with popular frameworks and supports resumable uploads too. GitHub repo.

Transloadit

JSON Editor: A JSON Schema Based Editor — A fork of an older inactive project, this tool allows you to generate an HTML form from a JSON Schema. You can try it out on this interactive demo.

JSON Editor

Maple Mono: An Elegant Open Source Monospace Font — This monospace font aims to fill some of the subtle features missing from other popular options, including support for the Nerd Fonts icon glyph aggregator. Docs site is here.

Maple Mono

CSS Questions — A just for fun, multiple choice quiz to test your CSS knowledge. You can either go for the basic test of 20 questions, try out the comprehensive exam of 60 questions, or jump into themed topic questions. Covers things like pseudo-classes, cascade layers, container queries, and much more. Good luck! 🫡

Sunkanmi Fafowora