Frontend Focus

A new HTML element for installing web apps

Wed, 13 May 2026 00:00:00 +0000

🚀 Frontend Focus

#741 — May 13, 2026 | Read on the web

Safari 26.5 Released: Here's the WebKit Features — Beyond the usual polish, 26.5 includes support for the :open pseudo-class, improvements to the CSS random() function, anchor positioning fixes, support for color-interpolation in SVG gradients, and Origin API support.

Jen Simmons

🧭 In related Safari news, the latest Safari Technology Preview Release is out now.

Prepare for Big Tech Frontend Interviews — Join Evgenii Ray for this detailed video course and land that dream job. Work through complex JavaScript, TypeScript, and UI component challenges, learning strategies to approaching onsite and take-home assignments.

Frontend Masters sponsor

Meet Your Users Where They Are with Obs.js — Obs.js is a tiny inline script that reads browser signals (latency, bandwidth, Data Saver, battery, CPU, memory) and exposes them as classes on <html> (and via window.obs). You can use these to serve smaller images on weak networks, skip animations on low battery, and adapt to your users’ real-world conditions.

Harry Roberts

Install Web Apps with the New <install> Element — A new HTML element is available for testing in Edge and Chrome (behind a flag) that renders a trusted 'install' button for web apps with no JS needed. This article digs into the details of how it works and how it compares to the Web Install API.

Patrick Brosset

⚡️ IN BRIEF

📏 Tailwind CSS v4.3 is out with new scrollbar utilities, a new @container-size utility, zoom-* utilities, and more.
🇺🇸 If you're in the US, you can get a free *.city.state.us locality domain.
🗓️ Google's I/O conference returns next week, with the developer keynote taking place on Tuesday.
❓ Did you know Firefox's DevTools has a $$$ function for querying through the Shadow DOM?
🤖 Mozilla shares a behind-the-scenes look at how Claude Mythos is helping to find bugs in Firefox.

📙 Articles, Opinions & Tutorials

Controlling the Speed of Infinite Animations — Learn how to control the speed of infinite CSS animations on user interaction, allowing for accelerating, slowing down, stopping, or reversing animations with a CSS variable.

Temani Afif

Soon We Can Finally Banish JavaScript to the ShadowRealm — Mat takes us through the in-progress TC39 proposal for running JavaScript in an isolated ‘pseudo-realm’ with its own globals and intrinsics — handy for third-party code and anything you want to keep away from your global scope.

Mat Marquis

Workshop: Debug Next.js Without Switching Tools — Hands-on Sentry workshop on debugging Next.js with high-context logs and distributed tracing. Register today.

Sentry sponsor

Better Browser Caching with No-Vary-Search — No-Vary-Search is an HTTP response header that tells caches which URL parameters can be ignored when matching requests to cached responses. While support is limited in browsers, for now, it's a general HTTP caching extension, so CDNs and shared caches can benefit too.

Harry Roberts

Six Million Selections Later: How the DMA Is Giving People Browser Choice — Two years on, the EU’s Digital Markets Act has been beneficial for Mozilla: “Firefox is selected through a DMA browser choice screen every 10 seconds. That adds up to more than six million Firefox selections”.

Gemma Petrie and Tasos Stampelos (Mozilla)

Testing Vue Components in the Browser — Julia sets up integration tests for her components that run entirely in the browser. She shares the issues she encountered while maintaining her approach of writing JavaScript for the frontend without using Node or server-side tooling.

Julia Evans

On Rendering the Sky, Sunsets, and Planets — Beautiful, thoughtful, and detailed work with shaders.
Maxime Heckel

Why Keyboard Users Can't Scroll Your Overflow Containers
Godstime Aburu

There Are Only Four Sensible Ways to Build a Website
Jono Alderson

Preserving DOM Changes Across Live Reloads
Kitty Giraudel

🧰 Tools, Code & Resources

wf: A CLI Tool for Looking Up Web Platform Features — A CLI tool for looking up web platform feature support, bugs, and docs, from Patrick Brosset of the Microsoft Edge team. You can install and run it as wf or you can just run it with npx like so: npx web-features-cli "fetch" .. The data is fetched live, too, so it’s always up to date.

Patrick Brosset (Microsoft)

Handsontable - Ship Faster with a Pre-Built Data Grid Component — 45 days of full feature trial plus direct support that will help you build what you’re aiming for.

Handsontable sponsor

Anime.js 4.4: The Flexible Animation Engine for HTML Elements — At ten years old, the ‘animate anything from JavaScript’ library continues to get even better with a new scrambleText effect and auto-grid layout mode for stagger grids. The docs for Anime are truly top-tier.

Julian Garnier

Cascade: A Set of SVG & React Icons for CSS Properties — A niche set of 97 icons specifically for representing CSS properties (e.g. a square for display: block, a two-column box for display: flex, and so on). Ideal if you're building design tools. GitHub repo.

Andrew Flett

visual-explainer: An Agent Skill That Turns Complex Terminal Output Into Styled HTML Pages — The idea here is to enable your agent to produce a more readable output than ASCII art or box diagrams, especially for more complex concepts like system architecture, diff reviews, and so on.

Nico Bailon

📰 Classifieds

⚡️ Add lightning-fast barcode & QR scanning to your web app with STRICH, a lean JS library. Simple, predictable pricing. Free trial and demo!

🔎 Detect, Highlight, Fix Accessibility - Test for WCAG & ARIA in the browser! Get A11yInspect Pro Free for 1 year - A developer friendly tool. Join the waitlist.

🔠 Putting Fonts Face-to-Face

Find Font: A Web Tool to Browse, Compare & Download Fonts — Includes a live comparison tool and an AI-powered font-pairing tool, with 5000+ free curated fonts to select from, in 50+ categories. You can view trending fonts, new additions, and compare up to 10 fonts on the same page.

Kaan Asici

CSS, but make it random

Wed, 6 May 2026 00:00:00 +0000

🚀 Frontend Focus

#740 — May 6, 2026 | Read on the web

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

⚡️ IN BRIEF

🧰 Here's what's new in Chrome 148 and in the DevTools, including support for name-only @container queries, lazy loading for video and audio elements, and the Prompt API.
🤖 A more critical take on Chrome installing a 4GB on-device AI model file without asking (the Gemini Nano model used with the Prompt API, as above).
🙅 Mozilla has pushed back on Google's AI API plans. Jake Archibald notes on Bluesky that others have concerns too.
⏱️ Chrome is launching an origin trial for the Container Timing performance API.
🪐 Astro 6.2 is now available, adding more control over SVG optimization and logging.

📙 Articles, Opinions & Tutorials

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

Making Dark Mode Play Nicely with the Back/Forward Cache — The so-called bfcache enhances browser performance, but it can also throw up some challenges.
Guilherme Simões

We Needed a Screenshot Pipeline; We Got a Design QA Tool Instead — A good reminder that zooming out for a high-level overview can often help!
Ben Schwarz

ARIA Roles Explained: A Practical Guide for Web Developers
Level Access

AI Doesn't Fix Accessible Systems. It Depends on Them
Anna E. Cook

🧰 Tools, Code & Resources

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

The end of srcset/sizes headaches is here

Wed, 29 Apr 2026 00:00:00 +0000

🚀 Frontend Focus

#739 — April 29, 2026 | Read on the web

The End of Responsive Images — Mat, former chair of the Responsive Images Community Group, reflects on 14 years of srcset/sizes headaches, admitting he hates the sizes syntax he championed. Relief is in sight: the new cross-browser sizes="auto" (now in Firefox 150, too) sizes lazy-loaded images automatically.

Mat Marquis

Add Stunning Shader Effects to Your UI in Minutes — Build creative WebGPU shader effects with components—or let your AI agent handle it via MCP. Start from a collection of 550+ pro presets, customize visually, and ship fast. Works with React, Vue, Svelte, Solid, vanilla JS and more.

Shaders sponsor

Scroll-Driven Animations — Josh has been experimenting with the 'majestic' new Animation Timeline API. Here he shows us how it works (complete with demos and code), gotchas to be aware of, and some of the more advanced things we can do with it. “honestly, it’s so good”.

Josh W. Comeau

⚡️ IN BRIEF

📢 Rachel Andrew gives an update on what's new to the web platform in April.
🛠️ The Build Awesome Kickstarter has returned, already hitting its funding goal. ICYMI, Build Awesome is the new name for 11ty.
🗓️ The U.S. Department of Justice has pushed back the Title II Web Accessibility deadline into 2027.
📝 Firefox has a new 'Tab Notes' feature if you want to remember why you have that 40th tab open.

📙 Articles, Opinions & Tutorials

Compositing & Blending — A fascinating look at what both compositing and blending are, what’s going on under the hood when you apply blend modes in CSS, and how to approach their use.

Niklas Gadermann

Optimistic UI Won't Fix a 3-Second Query — TimescaleDB extends Postgres so dashboard queries return in milliseconds, not seconds. No pipeline needed. Try for free.

Tiger Data (creators of TimescaleDB) sponsor

Recreating Apple’s Vision Pro Animation in CSS — Apple’s site is filled with delightful animation touches, and here John attempts to recreate such an effect with CSS’s scrolling animation capabilities.

John Rhea

Let’s Use the Nonexistent ::nth-letter Selector Now — Explains the long-standing absence of the ::nth-letter selector in CSS and presents a functional “impossible” polyfill to actually implement it today.

Lee Meyer

Constructable Stylesheets and adoptedStyleSheets: One Parse, Every Shadow Root — A technical guide looking at creating CSSStyleSheet objects directly in JavaScript and attaching them to Shadow DOM, eliminating redundant <style> tags and parsing CSS only once per component class. Likely a meaningful architectural win for any app leaning on Web Components.

Rob Levin

CSS Recently in All Browsers — A quick recap of the various CSS features that have hit baseline over the past six months.
Adam Argyle

Session Timeouts: The Overlooked Accessibility Barrier In Authentication Design
Eleanor Hecks

Debugging WASM in Chrome DevTools — Tips on using the Chrome DevTools’ “very capable WASM debugger”.
Eli Bendersky

🧰 Tools, Code & Resources

📈 Datatype: A Variable Font That Turns Text Into Charts — A variable OpenType font that displays inline charts (bar, pie, sparklines) without the need for JavaScript or images. The page shows how it works in context.

Frank Tisellano

Handsontable: Stop Building Data Grids from Scratch — 45-day trial with full feature access and direct support — so your team builds, not just evaluates.

Handsontable sponsor

portless: Replace Port Numbers with Stable, Named Local URLs — Something like localhost:3000 becomes myapp.localhost, useful for local development for both humans and AI.

Vercel Labs

Animata: A Suite of Animation-Focused React Components — A huge suite of animation-focused components including animated beams, spreading cards, a Slack-style intro screen, and glitching text. A novel set of visual concepts you won’t find in most collections.

Codse

View Transitions Mock: A Non-Visual Polyfill for View Transitions — A JS implementation of Same-Document View Transitions, minus the visual bits. Write one code path for all browsers: supporting ones get transitions, non-supporting ones get a DOM swap, but the promises and API behave the same.

Google Chrome Labs

DESIGN.md: A Specification for Describing a Visual Identity to Agents
Google Labs Code

Fun with clip-path: A Neat Menu Reveal with Pure HTML & CSS
Momcilo Popov

font-family doesn't fall back the way you think it does

Wed, 22 Apr 2026 00:00:00 +0000

🚀 Frontend Focus

#738 — April 22, 2026 | Read on the web

Building a UI Without Breakpoints — Amit makes the case for moving away from global viewport breakpoints, instead shifting to using modern CSS such as clamp(), container queries, and auto-fit to create fluid interfaces no matter the screen.

Amit Sheen

Catch Bugs Before Your Frontend PRs Merge — Frontend bugs rarely stay in the diff. Greptile reviews each PR with full repo context, flags real issues, and suggests fixes that match your team. Works with GitHub and GitLab.

Greptile sponsor

font-family Doesn’t Fall Back the Way You Think — Harry clarifies how inheritance actually works when loading in font stacks, provides some welcome nuance on why we often see flashes of unexpected text or even layout shifts, and of course shares how to easily fix things.

Harry Roberts

Firefox 150: Release Notes for Developers — Enhancements include light-dark() image support, changes to the CSS color-mix() function (with it now accepting multiple color values), the addition of media-based pseudo-classes, and more.

MDN

⚡️ IN BRIEF

✴️ Chrome is launching a final origin trial for the Soft Navigations API — a way to detect when JavaScript intercepts navigation.
🤖 Anthropic has unveiled Claude Design, a new Opus 4.7-powered collaborative design tool. Sam Henri Gold shares his thoughts on where it fits into the modern design tool ecosystem.
☁️ Cloudflare has released a preview of its new cf CLI tool for working with its various services.
🤖 Cloudflare has also launched a new tool to scan your site and determine how 'agent-ready' it is.
💵 Good news for Netlify users: the company is ending seat-based pricing.

📙 Articles, Opinions & Tutorials

Delivering a Dynamic Hexagonal World Map in 10KB — A walkthrough of building a hexagon-based SVG world map with the whole thing weighing in at just 10KB. Covers simplifying high-resolution GeoJSON with Turf.js and projecting it with d3-geo.

Ben Schwarz

First Experiments with the New 'HTML in Canvas' API — A fun primer looking at what we’ll be able to do with the HTML-in-Canvas API. It’s currently experimental, and is only available behind a flag — but these demos do a good job of showing what sort of things it will unlock — ”not just a new API; it is a new workflow mindset”.

Amit Sheen

Introducing B2B Authentication — Clerk combines Organizations, SCIM, SSO, RBAC, invites, and billing to build enterprise-ready apps.

Clerk sponsor

Details That Make Interfaces Feel Better — Plenty of good ‘small-detail’ UI advice here, and the learnings are also available bundled up as an AI skill.

Jakub Krehel

Making Your Site Visible to LLMs: 6 Techniques That Work, 8 That Don't — There aren’t any particularly accepted standards today, but these techniques are easy enough to put in place if you do want LLMs to return your sites in results.

Irina Nazarova (Evil Martians)

Why Some Images Look Brighter Than Your Screen — A technical exploration of why some images can sometimes seem brighter than a surrounding user interface when viewed on certain modern displays. Tom talks HDR, color profiles, gain maps, and more, sharing how such techniques can be utilised. There’s also a tool here to generate such images. (I opened this on my iPhone, and true enough, the image really does pop.)

Tom Nick

Green Components: How Your Design System Can Aid Sustainability Goals — Tips on how to make your site more sustainable via your design system, and measure the effects of your efforts.

Hidde De Vries

box-shadow Is No Alternative to outline
Manuel Matuzovic

🧰 Tools, Code & Resources

✉️ MJML 5.0: The Responsive Email Framework — HTML emails are a headache to code (trust us!) but MJML provides a component-based framework to make it less daunting if you don’t read CanIEmail on a regular basis. There's an upgrade guide to v5.0 if you're an existing user.

Mailjet

🔊 tiks: Procedural UI Sounds for the Web — Bleeps, blips, and clicks synthesized with the Web Audio API (so it’s tiny).

Rexa

Map Out Your Postgres AI Stack — Use EDB’s interactive configurator to architect your sovereign AI platform and get instant sizing and cost estimates.

EDB (Creators of EDB Postgres AI) sponsor

HyperFrames: Write HTML & JavaScript to Create Videos — An open-source framework for creating and rendering videos. Includes a variety of built-in blocks/components for common video effects and elements, and can also composite existing video and audio clips. GitHub repo.

HeyGen

µCSS: A Lightweight, Themeable CSS Framework — Includes default class-less styles in 20 different themes, dark mode toggle, 36 pre-built components, a mobile-first grid, and templating in PHP.

Digicreon

Formisch: A Modular, Type-Safe Form Library for Any Framework — A headless solution boasting a small bundle size with a simple, intuitive API to manage form state, handle user input, and Valibot schema-based validation. Try out some demos in the playground on the docs site.

Open Circle

TypeGPU: A Type-Safe WebGPU Toolkit — A WebGPU toolkit with advanced type inference and the ability to write shaders in TypeScript. Here’s a live example (flip the toggle to see the source).

Software Mansion

🦋 bsky-comments: A Zero-Dependency Web Component to Embed Bluesky Comments — No dependencies, works with any framework, it’s easy to style with CSS (i.e., no tricky Shadow DOM), and supports full threads with nested replies.

Florian Schepp

📰 Classifieds

📸 Add robust in-browser barcode scanning to your web apps using STRICH, a lean JS library. Free 30-day trial, try the demo app today!

Gauntlet AI Night School | RAG that holds up in production requires evaluation built in from the start. Learn how. (Virtual — 4/22)

Great builders start with curiosity. Join Mark Rober at Twilio SIGNAL, May 6–7 in SF, to see how he turns ideas into things people remember. Register for a discounted developer ticket here!

🧊 And finally..

Liquid Glass: WebGL Glass Effects for HTML Elements — A fun WebGL-powered effect you can apply, by way of JavaScript, to the HTML elements of your choice to reproduce realistic glass refraction and blur effects a la iOS 26. And, yes, there's an interactive playground (shown above).

Yassine Bouanane