Frontend Focus
Plus when blocking render is the right call, and a missing metric for page load mysteries.
Together with  Clerk
🚀 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

📙 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

What If Mobile Deploys Worked Like Web Deploys? — With Expo’s OTA updates, they do. You can configure OTA Updates in minutes and see them working on your next pull request.

Expo sponsor

Why the accept Attribute Degrades File Upload UXaccept 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

Issue 743 #744