How to Use the Media Queries Range Syntax for Better Breakpoints — Set min-width: 300px and max-width: 300px at exactly 300px and both rules fire. Ahmad's solution? Ranged media queries. The syntax is widely supported, can also be used for container queries, and is easier to read and debug.

Ahmad Shadeed

Fast Dashboards Start with Fast Queries — When dashboards outgrow vanilla Postgres, most teams add a second database. Pipelines, stale data. TimescaleDB extends Postgres so analytics stays fast on live data. Hypertables, 95% compression, continuous aggregates. Start with a $1000 credit.

Tiger Data (creators of TimescaleDB) sponsor

9 Times the Web Platform Was Influenced by Libraries — Highlights how various libraries often do the “R&D work in production” for various web platform features that eventually end up as native APIs. A walk down memory lane for many, no doubt.

Jad Joubran

Using safe-area-inset to Build Mobile-Safe Layouts — The ‘safe area’ is the portion of the viewport guaranteed to be free from being obscured by system UI, notches, etc. and safe-area-inset lets you use values in your CSS to avoid content falling into such areas.

Polypane

CSS 'n of' Selectors for Conditional Validation — Preethi looks at the lesser known n of syntax in CSS’s :nth-child() selector and pairs it with :has(), creating a clever form validation system, all without using JavaScript.

Preethi Sam

Build Any Web Layout, with Confidence — A practical, written CSS course that teaches you how to think, build, and debug web layouts. Use the code FFOCUS for 10% off.

The Layout Maestro sponsor

The Importance of Native Randomness in CSS — The “deterministic by design” nature of CSS means that achieving true randomness requires workarounds (like JavaScript, preprocessors, or server-side work). This post looks at the options, and makes the case for native variation tools that can take CSS from just a styling language into a generative layout system.

Alvaro Montoro

Trustworthy JavaScript for the Open Web — Web Application Integrity, Consistency and Transparency (WAICT) is an emerging spec for verifying that the JavaScript running in a browser actually matches what the site published (here's a deeper explainer). A prototype is now live in Firefox Nightly behind a flag.

The Firefox Security Team (Mozilla)

Open Web vs AI: What Can W3C Do? — A write-up of a recent W3C Advisory Committee meeting where discussions were held on the threats the open web faces and what to do about it.

Hidde de Vries

Warning: Containment Breach in Cascade Layer! — A PSA from David here: “I discovered a whole new level of specificity hell.”

David Bushell

Fancy Frames: A Pure CSS Generator for Squiggly/Wavy Frames — You probably haven’t seen a CSS generator like this one. It allows you to customize the size of the 'wavy' portion (the frame), along with radius, horizontal/vertical granularity – all based on clip-path syntax.

Temani Afif

ShaderPad: Add a Shader to Your Website Without the Boilerplate — A lightweight, dependency-free WebGL shader library for embedding “stunning creative effects” on pages. Repo here. I gave it a go, creating this animated rocket.

Riley J. Shaw

Clerk CLI: Scaffold Auth and Manage Config from Your Terminal — Run clerk init to scaffold auth, clerk config to manage sign-in methods in code, Clerk API to query users.

Clerk sponsor

AddFox: A Browser Extension Development Framework Based on Rsbuild — Has support for Firefox and Chromium browsers, and has lots of developer-oriented features like HMR, test flows, works with any framework, and lots more. GitHub repo.

AddFox

StyleBop: A Native Visual CSS Editor for macOS — A visual CSS editor for Mac. You can browse your stylesheets as node diagrams, edit variables and properties, and more.

Ben Dansby

Virtual Scrolling — A neat visual demo that shows one approach for handling a large list. Rather than processing all items, this ‘virtual scrolling’ approach only processes the items that are currently visible on screen.

Nic Barker demo