Frontend Focus
Plus Modern Web Guidance hits 1.0, doing math with CSS layout, and clever ways to keep the bots out.
Together with  Master.dev
🚀 Frontend Focus

#​766 — November 11, 2026 | Read on the web

Beyond the Viewport: Introducing Site Seeing — Making a design responsive means tackling more than just resizing, with real users often having on-screen keyboards, split views, docked DevTools, and other things open, or even using oddly sized in-app browsers. Ahmad's new, free browser-based tool is designed to preview your layouts in these awkward contexts.

Ahmad Shadeed

Run AI Coding Models on Your Own Machine — Local models are now good enough for everyday coding. Learn to run them on your own Mac or GPU, wire them into your editor and terminal agents, and keep your code private with no per-token bill.

Master.dev sponsor

🤖 Modern Web Guidance 1.0: Web Expertise for AI Agents — Coding agents can write good code, but tend to fall behind on Web standards and best practices. Chrome's skills for steering agents toward modern, Baseline-aware HTML/CSS are now stable, and it's not just Google: Lea Verou, Patrick Brosset (Edge), and Jake Archibald (Firefox) are among the project's owners.

Philip Walton (Google)

The Web is More Than Enough — An encouraging reminder of the immense power of the Web platform and how advanced use of WebAssembly, Web Crypto, WebGL, and Web Audio is increasingly within the reach of developers to build apps you'd once never have imagined in the browser.

Paul Ford

⚡️ IN BRIEF

📙 Articles, Opinions & Tutorials

Computing with CSS Layout — How much can CSS 'compute' on its own? Leaning on the behavior of CSS grid, flexbox, and more, this interactive piece shows how to read CSS's 'calculations' back as numbers and put them to practical use, including drawing animated charts.

Agustin Capeletto

System Colors Need to Work Together — You might expect paired CSS system colors like HighlightText and Highlight to be readable together, but in Chrome on Android's dark mode they manage a contrast ratio of only 1.98:1. Aaron's cross-browser study shows which pairs hold up.

Aaron Gustafson

How to Build Your Own Automated Debugging Workflow — Connect your coding agent to Sentry and turn errors into fix PRs. See the guides and recipes in the resource hub.

Sentry sponsor

Is 'Using Declarations Just Once' Still Effective in CSS? — This classic optimization technique merges repeated declarations under one grouped selector. Jens built a tool to test it on 30 real sites and found it can still cut uncompressed file size, if applied selectively.

Jens Oliver Meiert

Local Visual Regression Testing for Agents with Playwright — A look at using Playwright's toHaveScreenshot matcher to give coding agents a consistent local visual-feedback loop.

Paolo Ricciuti

Building Interfaces That Understand What Users Want to Do — A look at using small AI 'decision models' to pick from options you define, including via Chrome's experimental, on-device Decisions API.

Agustin Barrientos

CSS-Tricks, Version 20 — Now under new ownership, the site is getting JavaScript cleanup, a Sass reorganization, and more, which Geoff explains in detail.

Geoff Graham

A Groundbreaking Upgrade to SVG is Approaching: Linked Parameters are Almost Here
Roman Komarov

Making Immersive LLM Chat Experiences More Accessible
Eric Bailey

Re-Implementing :nth-child() with Modern CSS
Temani Afif

🧰 Tools, Code & Resources

Britecharts 3.0: Ready-Made, Accessible D3 Charts — A long-awaited major release for this library of reusable D3 charts makes them accessible by default, with screen reader data tables and keyboard navigation. Also adds dark mode, TypeScript types, and a treemap. The docs are really good.

Marcos Iglesias

The “Export CSV” Button Shouldn’t Time Out — Exports scan every row in the range and slow as data grows. TimescaleDB keeps them fast. $1000 credit on Tiger Cloud.

Tiger Data (creators of TimescaleDB) sponsor

🎨 This Hue Shall Pass: A Contrast Checker That Fixes Failing Color Pairs — Paste in a palette to get a grid of every foreground and background pairing, graded against WCAG AA or AAA. It doesn't just flag failures, you can also nudge near-misses into passing while keeping the hue intact. More background here.

Clearleft

Liquid Glass Forge: Refraction Behind Native HTML Controls — An experimental WebGL2 and CPU rendering engine for glass refraction, a la Apple's Liquid Glass. You can see a demo here.

Nami Poursafargholi

🔡 Tinkerfont: A Font Inspection and Switching Tool for Chrome & Firefox — Install this extension and you get a quick way to inspect fonts on the current page (and their properties), and try alternative fonts directly on the page.

Mighil

BagUI: Components & Blocks for Building SaaS Landing Pages — A free collection that includes clean, customizable marketing pages, app pages, blocks, and templates for React and shadcn/ui users. Source code.

Anelka Bagalane

Master CSS 2.0: A Markup-Driven CSS Language — A utility-class framework where one class can carry a value, selector and condition (e.g. fg-blue-70:hover@sm). v2 adds design tokens defined in your own CSS, a wide-gamut color palette, and linting and editor tooling.

Aoyue Design

📰 Classifieds

🔁 Your agent checks web work with a refresh. On mobile it needs a device. Expo Simulators gives it one in the cloud.


📅 Booking forms without a backend: Real availability, live totals and deposits via your own Stripe or PayPal. CraftForms, from €6/month.


✍️ Foxit: Still redirecting users to a signing portal? 6 eSignature APIs compared on embedded signing, pricing and integration effort.

🛑 Finally, if you want to keep the bots out…

A Blunt Banhammer Blocks Basic Bots Ballistically — Terence Eden's site was plagued by bots using up his bandwidth, so he built an interesting honeypot that lures the robots.txt-ignoring bots in and hands out a ban. It works, with an almost 90% drop in bandwidth used, but there are some tradeoffs.

If you're happy to lean on the cloud for protection, Nick Gray recounts his year of fighting scrapers with Cloudflare, including his firewall rules and failed experiments.

Meanwhile, with a more… 'creative' approach, Utku Sen filled a test site's code with taboo phrases and found AI agents refused to touch it. This may be more useful if you want to prevent casual reverse engineering/vulnerability hunting, though.

Finally, even if you welcome crawlers, they can make your analytics misleading. Hugo Attal looked into his server logs and found 90% of his 'human' visitors were bots.

Till next time…

Issue 765 #766