Frontend Focus

Google I/O and the 'era of the agentic web'.

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

🚀 Frontend Focus

#742 — May 20, 2026 | Read on the web

15 Updates from Google I/O 2026 — Google’s I/O conference began yesterday, with the keynote focusing on “the era of the agentic web”. This post runs through the notable announcements for developers, including the proposed WebMCP standard, automated debugging in DevTools, the HTML-in-Canvas API, the introduction of a Baseline Checker tool, and using AI skills directly in Chrome.

Tabriz, Kinlan, Gvak, Lee (Chrome for Developers)

💡 Vittorio Retrivi takes an enthusiastic, closer look at the proposed HTML-in-Canvas API: "I have to say, I’m pretty excited about it". This post explores how it works, and what it enables by way of a few practical demos.

🤖 Build with Modern Web Guidance — Also announced at I/O is this new set of “evergreen and expert-vetted” AI skills. It works with a slew of popular coding agents and can assist with best practices and patterns across UX, performance, accessibility, layouts, and more. Repo here.

Chrome for Developers

Your React App Can Run Natively on iOS and Android — Expo is the framework the React Native team recommends. It gives you file-based routing, API routes, SSR, and static rendering across web, iOS, and Android. Same React patterns you write today, with native performance on every platform.

Expo sponsor

Moving Away from Tailwind, and Learning to Structure My CSS — Some eight years after picking up Tailwind, Julia shares how she has migrated two of her sites back to semantic HTML and vanilla CSS — noting what she learned about structuring CSS along the way.

Julia Evans

Firefox 151 Release Notes for Developers — This version shipped yesterday — it finally brings desktop support for the Document Picture-in-Picture API, along with the @container CSS at-rule now supporting style() queries.

Mozilla

⚡️ IN BRIEF

🤔 TIL that some browsers render certain sites 'differently'. Firefox & Safari ship with 'tweaks' for popular sites to fix things that don't render correctly by default.
🇳🇱 The full schedule for next month's CSS Day — taking place in Amsterdam — is now online.
🎂 It's been 16 years since Google Fonts launched as a font library called Google Web Fonts.
📗 Laura Kalbag's 'Accessibility for Everyone' book is now free to read.

📙 News, Opinions & Tutorials

Better Fluid Sizing with round() — Ahmad, in his typically accessible style, writes about how the well-supported CSS round() function can now be used to help create predictable fluid sizing. He notes how it pairs well with clamp() to assist on sizing, typography, and spacing. The result? Cleaner and easier to maintain type scales, along with refined responsive layouts overall.

Ahmad Shadeed

600+ Million People Write Right-to-Left: Two Fixes Your App Needs — An evergreen reminder that hundreds of millions of people write right-to-left, and yet many dev tools treat this as an afterthought. This post looks at how in most instances the fix is simple enough: just two HTML attributes.

Nina Torgunakova

Stale Data Makes Your Fastest Components Feel Slow — TimescaleDB extends Postgres so dashboards query live data at scale. No pipeline, no stale reads. $1000 credit to start.

Tiger Data (creators of TimescaleDB) sponsor

Gap Decorations: Now Available in Chromium — Imminent versions of both Chrome and Edge will support CSS gap decorations — a nice way to easily style the gaps found between grid, flexbox and multi-column layouts, without the need for pseudo-elements or borders.

Contreras & Omekara (Chrome for Developers)

Seven Ways of Specifying Per-Theme Colours in Only CSS — A handful of CSS-only approaches to per-theme colours, with auto, light, and dark all handled — including palette variables. A solid practical reference if you're rebuilding a theming system.

Chris Morgan

Cross-Document View Transitions: The Gotchas Nobody Mentions — A technical look at some of the pitfalls to be aware of when setting up native view transitions (including changes to implementation), along with practical steps needed to overcome them.

Durgesh Rajubhai Pawar

The Boring Internet — “The internet you grew up on isn’t dying. A commercial veneer glued on top of it is”.

Terry Godier

Creating 'Repeating Square Dots' Backgrounds in CSS
Chris Coyier

When to Use and Not Use CSS Shorthand Properties
Elaina Natario

The Problem with HTML 'reset' Buttons
Adam Silver

🧰 Tools, Code & Resources

SVG Studio: A Browser-Based Animation Tool — Offers an easy-to-use layer-based experience with a keyframe timeline, animatable properties, easing functions, loop control, undo/redo, among other features. Helpfully, there’s a demo file you can mess around with when you launch the app.

SVG Studio

Swup: A Flexible Page Transition Library for Server-Side Rendered Sites — We last featured this back in 2023, and it’s still seeing regular updates. It’s a versatile library that adds snappy page transitions to server-rendered websites. It’s worth checking out the demos here.

Georgy Marchuk

Add User-Scoped API Keys to Your App with Clerk — Users generate credentials that delegate access to your API. Manage via the Backend SDK or Clerk Dashboard. Free tier included.

Clerk sponsor

Critical 8.0: Extracts & Inlines Critical Path CSS from HTML — A popular, production-ready library for extracting and inlining above-the-fold CSS into HTML. Version 8.0 arrived just a few days ago.

Addy Osmani

phantom-ui: A Web Component That Provides a Structure-Aware Skeleton Loader — Compatible with any framework and works by measuring the DOM at runtime. Try out the demo page where you can customize the colors and settings like shimmer, stagger, etc.

Frank Aejkatappaja

Qite.js: A Frontend Framework for People Who 'Hate React and Love HTML' — Think htmx or similar with declarative HTML. This solution boasts no build step, no virtual DOM, SSR-first, and can be incorporated with native web APIs. Source code.

Qite.js

🖼️ Pica 10.0: High Quality Image Resizing in the Browser — High quality in-browser image resizing that leans on WASM and Web Workers or falls back to pure JS as necessary. GitHub repo.

Vitaly Puzrin

cssdb: A Database of CSS Feature Progress — A comprehensive list of CSS features and their web standards implementation status.
cssdb

hihtml: A Supertool for HTML Validation, Link-Checking, and Minification
Jens Oliver Meiert

🗺️ ...and finally

webcompat.dev — A map that helps us see and understand the connections between various web compatibility tools and resources. It has just over 30 listed right now — It’s a neat idea that could be fleshed out further as a visual discovery aid.

Niklas Merz

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