--- title: "Responsive design is more than resizing a window" publication: "Frontend Focus" issue: 766 published_at: "2026-11-11" canonical_url: "https://frontendfoc.us/issues/766" --- Plus Modern Web Guidance hits 1.0, doing math with CSS layout, and clever ways to keep the bots out. Together with [![Master.dev\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_1280,h_245/co_white,e_outline:17/cgiteem1q7kgf8yoheqo.png)](https://master.dev/courses/local-ai/?utm_source=email&utm_medium=frontendfocus&utm_content=localaicooper) πŸš€ **Frontend** Focus #​766 β€” November 11, 2026 | [Read on the web](https://frontendfoc.us/issues/766) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1794399820/g4ohjfqewzkqxwe6thco.png)](https://ishadeed.com/article/beyond-the-viewport/) [Beyond the Viewport: Introducing _Site Seeing_](https://ishadeed.com/article/beyond-the-viewport/) β€” 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](https://lab.ishadeed.com/tools/site-seeing/) is designed to preview your layouts in these awkward contexts. Ahmad Shadeed [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/82bd8c3e.png)](https://master.dev/courses/local-ai/?utm_source=email&utm_medium=frontendfocus&utm_content=localaicooper) [Run AI Coding Models on Your Own Machine](https://master.dev/courses/local-ai/?utm_source=email&utm_medium=frontendfocus&utm_content=localaicooper) β€” 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](https://developer.chrome.com/blog/modern-web-guidance-v1) β€” 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](https://ftrain.com/aboard-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 - πŸ—³οΈ The State of JS survey for 2026 is [open now and seeking responses](https://survey.devographics.com/en-US/survey/state-of-js/2026?ref=frontendfocus). - 🦊 [Firefox 160](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/160) is now stable. [On-device speech recognition](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API#on-device_speech_recognition) via the Web Speech API arrives on desktop, and you can experiment with `blocking="render"` and lazy loading for video and audio behind flags. - β™Ώ GitHub now recognizes [an `ACCESSIBILITY.md` file](https://github.blog/open-source/maintainers/accessibility-statements-now-have-a-home-on-github/) and surfaces it on a repository's overview page. - πŸ¦“ Zigzag is [a new lightweight browser for macOS](https://zigzagbrowser.com), coming in at just 18MB. πŸ“™ Articles, Opinions & Tutorials [Computing with CSS Layout](https://noscript.ing/compute) β€” 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](https://www.aaron-gustafson.com/notebook/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](https://aarongustafson.github.io/system-color-study/) shows which pairs hold up. Aaron Gustafson [How to Build Your Own Automated Debugging Workflow](https://sentry.io/resources/automated-debugging/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=automateddebugging-fy27q4-evergreen&utm_content=newsletter-sponsored-link-resource-hub-learnmore) β€” 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?](https://css-tricks.com/css-using-declarations-just-once/) β€” This classic optimization technique merges repeated declarations under one grouped selector. Jens built [a tool](https://github.com/j9t/css-dedup) 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](https://mainmatter.com/blog/2026/11/03/local-visual-regression-testing/) β€” 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](https://agustinbarrientos.com/writing/senior-eye/interfaces-that-understand-what-we-want) β€” 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](https://css-tricks.com/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](https://blog.kizu.dev/link-parameters-soon/) Roman Komarov [Making Immersive LLM Chat Experiences More Accessible](https://www.smashingmagazine.com/2026/11/making-immersive-llm-chat-experiences-more-accessible/) Eric Bailey [Re-Implementing `:nth-child()` with Modern CSS](https://css-tricks.com/re-implementing-nth-child-with-modern-css/) Temani Afif 🧰 Tools, Code & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/kkcktihimonjpqqyvwwm.jpg)](https://britecharts.github.io/britecharts/blog/britecharts-3) [Britecharts 3.0: Ready-Made, Accessible D3 Charts](https://britecharts.github.io/britecharts/blog/britecharts-3) β€” 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](https://britecharts.github.io/britecharts/docs/Britecharts) are really good. Marcos Iglesias [The β€œExport CSV” Button Shouldn’t Time Out](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter) β€” Exports scan every row in the range and slow as data grows. TimescaleDB keeps them fast. [$1000 credit on Tiger Cloud](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter). Tiger Data (creators of TimescaleDB) sponsor 🎨 [This Hue Shall Pass: A Contrast Checker That Fixes Failing Color Pairs](https://thishueshallpass.clearleft.com/) β€” 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](https://clearleft.com/thinking/fix-the-contrast-without-losing-your-brand). Clearleft [Liquid Glass Forge: Refraction Behind Native HTML Controls](https://github.com/namipsg/liquid-glass-forge) β€” An experimental WebGL2 and CPU rendering engine for glass refraction, a la Apple's Liquid Glass. You can [see a demo here](https://namipsg.github.io/liquid-glass-forge/#playground). Nami Poursafargholi πŸ”‘ [Tinkerfont: A Font Inspection and Switching Tool for Chrome & Firefox](https://tinkerfont.com/) β€” 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 [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1794397533/zeqzwunisnhxw2vliv1b.png)](https://www.bagui.pro/) [BagUI: Components & Blocks for Building SaaS Landing Pages](https://www.bagui.pro/) β€” A free collection that includes clean, customizable marketing pages, app pages, blocks, and templates for React and `shadcn/ui` users. [Source code](https://github.com/anelkabag/bag-ui). Anelka Bagalane [Master CSS 2.0: A Markup-Driven CSS Language](https://master.co/blog/master-css-v2) β€” 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](https://try.expo.dev/4iKSypO) gives it one in the cloud. --- πŸ“… [Booking forms without a backend](https://craftforms.app/developers/?utm_source=frontendfocus&utm_medium=newsletter&utm_campaign=ff-2026-11-11-classified): Real availability, live totals and deposits via your own Stripe or PayPal. [CraftForms, from €6/month](https://craftforms.app/developers/?utm_source=frontendfocus&utm_medium=newsletter&utm_campaign=ff-2026-11-11-classified). --- ✍️ [Foxit](https://developer-api.foxit.com/developer-blogs/api-guides-tutorials/adobe-sign-api-alternatives-embedded-signing/?utm_source=draftdev&utm_medium=newsletter&utm_campaign=frontendfocus_20261111): Still redirecting users to a signing portal? [6 eSignature APIs compared](https://developer-api.foxit.com/developer-blogs/api-guides-tutorials/adobe-sign-api-alternatives-embedded-signing/?utm_source=draftdev&utm_medium=newsletter&utm_campaign=frontendfocus_20261111) on embedded signing, pricing and integration effort. πŸ›‘ Finally, if you want to keep the bots _out_… [A Blunt Banhammer Blocks Basic Bots Ballistically](https://shkspr.mobi/blog/2026/11/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](https://patronview.com/news/99-percent-of-my-website-traffic-is-bots/), 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](https://utkusen.substack.com/p/tricking-deepseek-into-not-hacking). 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](https://luna-park.app/blog/my-human-visitors-were-bots). Till next time… πŸ“¬ **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://bsky.app/profile/brandrick.bsky.social) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)