An Alternative Proposal for CSS Masonry — Last week we shared WebKit’s thoughts on how to approach creating masonry type layouts in CSS. Now the Chrome team has weighed in, stating that “implementing it as part of the CSS Grid specification [..] would be a mistake”, and they think it should be its own separate layout method defined using display: masonry or something similar.

Rachel Andrew (Chrome)

Here's a Simple Video API for Your Next.js Application — Integrate a video player into your Next.js applications! Learn about HTML5 video tag, video.js library, and how you can unlock more functionality and performance with the ImageKit Video API. Deliver an optimized, buffer-free video stream every time.

ImageKit sponsor

The Popover API is Here — The Popover API now has broad support, and as such Chris gives us a brief overview of how it differs from <dialog> and how we may want to approach using it.

Chris Coyier

Printing Music with CSS Grid — The author notes (pun very much intended) that music notation on the web should be as accessible and fluid as text is - but how do we go about fixing it so musicians don’t have to fumble pinch-zooming a PDF during a gig? Lots of good examples here and a reminder of just how far you can take CSS!

Stephen Band

Learn Modern UI Engineering with Web Components and Web Standards — 13 modules, 170+ videos, and an interactive learning app guide you from novice to expert with the latest web standards.

Blue Spire sponsor

Handling the Indentation of a Treeview Component — How should you approach building a UI that contains nested components, with an increasing indentation for each one? Ahmad looks at solving it with CSS.

Ahmad Shadeed

Reaction-Diffusion Compute Shader in WebGPU — A look at how to use WebGPU compute shaders to create some rather wild looking patterns. Support is limited right now, but it’s a neat effect.

Robert Leitl

Passkeys: A Shattered Dream? — William, who has his own web auth project, shares some concerns and growing disillusion with passkeys.

William Brown

DesignSystemHunt: A Curated Collection of Design Systems from Popular Brands — Currently includes links and info on 140+ different design systems from various startups, brands, tech companies, etc.

DesignSystemHunt

extension.js: Zero-Config, Cross Browser Extension Dev Starter — The goal is to make it as simple as a npx extension create my-extension to get started with building your own browser extension. GitHub repo.

Cezar Augusto

Transformational Auth & Identity | Userfront — "Compared to our previous experiences in the security/auth space, Userfront is an order of magnitude simpler to use."

Userfront sponsor

Popicons: A Set of Free Figma/SVG Icons in Line, Solid & Duotone Styles — Designed in Figma and you can download the whole lot or go directly to the searchable gallery and copy the SVG code directly.

Popicons

Only <Spans>: Each Element on This Page is a SPAN — A silly what-not-to-do experiment that demonstrates the fact that every element on a page can be an HTML <span> element but modified for different roles using CSS.

OnlySpans

Fluid for Tailwind CSS — A fluid clamp() plugin for Tailwind that works with every utility. Repo here.

Maxwell Barvian

JSON Generator: An Intuitive Tool for Crafting Complex JSON Structures — Includes 40+ “template tags” (or functions) that you can incorporate into the JSON template so you can generate specific types of content for use in testing, mocking, teaching, and so on.

JSON Generator

'Doom' Scroll — A neat demo of @scroll-timeline — a new CSS property that allows animations to be driven by a container’s scroll position. YMMV on browser support here.

Adam Kuhn