Frontend Focus

Rendering 3D meshes in the DOM with CSS

Wed, 3 Jun 2026 00:00:00 +0000

🚀 Frontend Focus

#744 — June 3, 2026 | Read on the web

Accessible (I Think) Split-Cell Table Headers — Eric Meyer tackles a niche <table> layout puzzle: diagonally-split table header cells like those in vintage NASA papers. He leans on rowspan and absolute positioning, while keeping things accessible with input from Alice Boxhall and Adrian Roselli.

Eric Meyer

🤖 Chrome 149's Big Upgrades to AI Dev Assistance — The recently announced MCP server and CLI for Chrome DevTools for agents is now officially stable in Chrome 149. It lets AI coding tools programmatically drive debugging, carry out perf audits, and more, should you want them to.

Matthias Rohmer (Chrome for Developers)

Add Production-Ready Auth to Next.js in Minutes — Clerk CLI scaffolds auth into your Next.js project from the terminal. clerk config manages sign-in methods and session policies in code. clerk api fetches users, orgs, and sessions. No dashboard required.

Clerk sponsor

Introducing the HTML-in-Canvas API Origin Trial in Chrome — HTML-in-Canvas lets you draw live, interactive HTML and CSS into a <canvas> element, combining DOM accessibility and text layout with performant low-level graphics. Handy for visualizations that need to stay fully interactable.

Nattestad & Markoborodova (Chrome for Developers)

💡 Liquid DOM, a DOM-based implementation of Apple's 'liquid glass' effect offers a neat demo of HTML-in-Canvas (and WebGPU) if you have it enabled.

⚡️ IN BRIEF

📍 Here's Rachel Andrew's latest round-up of what features landed in stable and beta browsers during the past month, including three new Baseline additions.
🚢 Chrome 149 ships with CSS gap decorations for styling the whitespace between flex and grid items.
📝 The latest version of VS Code has improved its integrated browser adding a bookmarking feature and more ways to capture screenshots.
✨ Microsoft's Edge browser has expanded its on-device AI capabilities with new models and APIs.
🤖 The results from the 2026 State of Web Dev AI survey are now live.

📙 Articles, Opinions & Tutorials

Revealing Text with CSS letter-spacing — Preethi shares a desire for something like ::nth-letter as a way to unlock creative, individual targeting of characters — but, until we have such a tool, she looks at what we can do today with letter-spacing, ::first-letter, and ::first-line.

Preethi Sam

Intentionally Blocking Rendering with JavaScript — We’re usually told to keep scripts non-blocking with async/defer, but sometimes it’s worth holding back paint: blocking="render" keeps the parser running while preventing the layout flash when a component needs JavaScript to measure before it's shown.

Jay Freestone

See What Your Last Release Did to Your Users — Ship a release this. By tonight you can know if the app got faster, slower, or worse for any specific cohort of users.

Expo sponsor

Why the accept Attribute Degrades File Upload UX — accept lets inputs specify which file types they accept (e.g. image/jpeg) but the UX is poor. Adam's recommendation is to ditch it and show a clearer error after submission.

Adam Silver

📊 Frontend’s Missing Metric: The TBT Window — Harry makes the case for tracking the "TBT Window", the FCP-to-TTI interval during which Total Blocking Time is counted. Since it shifts as FCP or TTI move, TBT can regress with no real change in blocking work.

Harry Roberts

▶ Stop Using :invalid and :valid Pseudo-Classes: Use This Instead — A ~3 minute video tip showcasing a better way to handle inline form validation using CSS, rather than resorting to JS or hacks.

Zoran Jambor

▶ AI, Web and Standards — A 12-minute talk on web features that make AI integration easier, and the standards needed to curb AI’s damage to the web.

Hidde de Vries

Tools the Vercel Product Design Team Actually Uses — From the head of product design at Vercel.
Hannah Hearth (Vercel)

Algorithmic Theming Engines: Building Self-Correcting Color Systems with contrast-color()
Durgesh Pawar

Keyboard Accessibility: The Clearest Signal of Digital Maturity
Dennis Deacon

🧰 Tools, Code & Resources

PolyCSS: Render 3D Meshes in the DOM with CSS — Renders textured 3D in the DOM using CSS matrix3d() transforms with no WebGL or <canvas> needed. Each polygon is an element you can style and interact with. There’s a gallery to explore and a live builder to try. GitHub repo.

LayoutitStudio

Handsontable 17.1.0: Excel Export, Server-Side Rows & Toasts — Export tables to .xlsx, load backend data without adapter code, and surface toast notifications — all in one major release.

Handsontable sponsor

Curlwind: A No-Build Tailwind Utility Generator — Drop the CDN file into your project with the desired query params, which define only the classes you need, any variants, custom prefixes, and more.

Steve Bauman

Fontastic Space: Find Mathematically Optimal Font Pairings — A free, browser-based tool to help you find a font pairing that’s mathematically optimal. It pairs based on multiple categories, including cap-height, ascender differences, and more.

Dasha Dzisko

🤖 Code Wiki: Gemini-Generated Repo Documentation That’s Always Up-to-Date — Designed to help developers quickly get up to speed on any new codebase by generating natural language summaries and architecture diagrams for any repository. Here’s an example using React’s repo.

Google for Developers

Markdown Printer: Chrome Extension to Save Pages as Markdown — Potentially useful for feeding info to LLMs in AI development, converting files for use in documentation, or just saving files as notes.

Lev Gelfenbuim

All UtilityCSS: A Directory of Tailwind Templates, Components and Tools — Includes both free and premium listings and you can filter by component category, resource type, tech stack, and the UI kit the resources are based on.

Ajay & Anand Patel

What's still missing from CSS

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

🚀 Frontend Focus

#743 — May 27, 2026 | Read on the web

The State of CSS Centering in 2026 — Temani offers up a fresh exploration of a perennially popular CSS topic, promising some hidden tricks and modern features you may not be aware of, especially now that things like place-content and CSS anchor positioning are in play.

Temani Afif

See Every Auth Event Across Your App in Real Time — Clerk's new Application Logs streams a reverse-chronological feed of auth, billing, and org events. Filter by event type, actor, subject, trace ID, or date range. Click any entry for full metadata and a JSON payload. Available on all plans.

Clerk sponsor

🗳️ The State of CSS Survey for 2026 is Now Open — This year’s edition covers fewer features, meaning you should be able to get through it quicker. It focuses “on the ones that matter most”, adding that in an age of AI-assisted coding “maybe doing less — but doing it better — is how those of us who still insist on hand-coding [..] can stay competitive”.

Devographics

What's Missing in CSS Layout — Patrick, drawing from the results of last year’s State of CSS survey, explores the friction points of modern web design and layout, looking at what gaps are left for CSS to fill.

Patrick Brosset

▶ Google Might Have Just Killed Websites — Post I/O, Kevin talks about the inflection point we find ourselves at, with AI scraping devaluing websites en masse, and AI summaries removing the need to click — asking what this means long term. There’s related reading to be found in the YouTube description.

Kevin Powell

⚡️ IN BRIEF

👨‍🚀 WordPress 7.0 is out now — here's a rundown on what's new, including a slew of optional AI features.
🪲 Jake Archibald notes that Chrome has a bug with <input type="number"> which causes values to change unexpectedly. It will be fixed in Chrome 150.
🦊 The Firefox UX team has shared an update on the design considerations behind the browser.
🎨 Talking of browser design, Vivaldi just had its "biggest design overhaul, ever".
👋 asm.js will be removed from a future release of Firefox — the browser's JS engine now disables optimizations for it by default.
⚛️ JavaScript library React turns 13 this week — we've got a newsletter for that.

📙 Articles, Opinions & Tutorials

CSS vs. JavaScript — When it comes to animation performance, which performs better, and when? Josh takes a look at the nuances involved and the performance implications of different animation strategies.

Josh W. Comeau

Chrome Introduces Declarative Partial Updates — Chrome 148 introduces (behind a flag) two experimental features for declarative partial updates: <template for> brings JS-free templating into your markup, while setHTML() and streamHTML() lets you safely stream HTML blocks into the DOM out of document order. Polyfills are offered for both.

Pollard and Rosenthal (Chrome)

Your Puppeteer Setup Breaking at 500+ PDFs a Night? — Foxit's HTML-to-PDF API handles rendering, fonts, and batch concurrency so you don't run a Chrome fleet in production.

Foxit sponsor

Maybe Don’t Rely on Google’s “Modern Web Guidance” — Last week we shared news of Google’s new set of LLM skills designed to help build modern web apps. Adrian has some thoughts, recommending we “probably ignore” for… a few reasons.

Adrian Roselli

Don't Put aria-label on Generic Elements Like divs — Explains why slapping aria-label on a plain <div> or <span> is both a spec violation and tricky in practice. There are exceptions, but screen readers across browsers and operating systems show wildly inconsistent results.

Manuel Matuzovic

Framework-Agnostic Design Systems: A Practical Approach to Web Components — An accessible guide that covers managing, building and packaging design system components.

Scott Riley

Advanced Tree Counting: Mathematical Layouts with sibling-index() and sibling-count()
Durgesh Pawar

Cross-Document View Transitions: Scaling Across Hundreds of Elements
Durgesh Pawar

Is AI Causing a Repeat of Frontend’s 'Lost Decade'?
Mauro Bieg

🧰 Tools, Code & Resources

Tegaki: Turn Any Font Into Animated Handwriting — Supports any font or text (including non-English) and works with all major frameworks. A bunch of handwriting fonts are built into the package and you can try it live in this playground. Neat!

Gokhan Kurt

Add Semantic Search to Your App Without a Separate Vector Database — EDB Postgres supports pgvector for AI semantic search in existing infrastructure, meaning no separate vector database.

EDB (Creators of EDB Postgres AI) sponsor

font-size-adjust-calculator: A Font Metrics Calculator for the font-size-adjust Property — A straightforward, no-frills tool — just upload a font in TTF, OTF, WOFF, or WOFF2 format, and plug in some optional variable font settings, and it will provide a suitable value for the font-size-adjust property.

richard rutter

Tailwind CSSTree: CSSTree Syntax for Tailwind — A JS package that allows you to use the syntax from CSSTree (a parser/walker/generator for CSS) in Tailwind projects. You can use it directly with CSSTree and it's compatible with the ESLint CSS Plugin.

Nicholas C. Zakas

dev.css: CSS to Make Any Plain HTML Modern and Responsive — Inspired by new.css, a set of default styles for standard HTML – potentially useful for a simple blog, an “about” site, or similar. Demo page.

Devin

La Carte Blanche: Free Printable Project Definition Card for UX Strategy
Stéphanie Walter

👀 All Eyes on JSON

JSON For You: JSON Visualization and Processing Tool — Includes graph and table view modes, nested parsing, support for jq, and ability to import/export CSV. We see a lot of tools like this but the output here (above) is particularly elegant. Try it here.

loggerhead

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