~frontendfocus | Issue 641 - A Masonry Mistake? (17)

'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.

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

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.

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.

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.

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.

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!

▶  Optimizing INP: A Deep Dive — A good step-by-step instructional video on digging into responsiveness issues in Chrome’s Performance Panel (29 minutes).

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.

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.

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

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.

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.

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.

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.

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.

Transformational Auth & Identity | Userfront — Userfront is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers.