--- title: "Five CSS properties for eye-catching text designs" publication: "Frontend Focus" issue: 754 published_at: "2026-08-12" canonical_url: "https://frontendfoc.us/issues/754" --- Plus tackling the bot overload, unlocking your scroll, and some CSS piping. πŸ—“οΈ **A brief scheduling note**: We're taking a summer break next week, so will be back in your inbox on August 26. Catch you then! __ _Your editor, Chris Brandrick_ 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/frontend-architecture/?utm_source=email&utm_medium=frontendfocus&utm_content=frontendcooper) πŸš€ **Frontend** Focus #​754 β€” August 12, 2026 | [Read on the web](https://frontendfoc.us/issues/754) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280/c_crop,g_center,w_1280,h_350/e_sharpen:60,q_auto/ez1d8heqzomnm3vihywq.jpg)](https://patronview.com/news/99-percent-of-my-website-traffic-is-bots/) [99% of My Website Traffic is Bots](https://patronview.com/news/99-percent-of-my-website-traffic-is-bots/) β€” Nick shares details of a year-long battle against large-scale bot traffic, looking at how the nature of bot traffic is quickly evolving, and the steps he took to mitigate it (specifically using Cloudflare's rules). A transparent look at a growing site reliability problem. Nick Gray πŸͺ„ [Five CSS Properties You Should Know for Better Text Designs](https://master.dev/blog/typographic-css-tricks/) β€” A review of some techniques for sprucing up text on the web with CSS. There's code and demos showing how `background-clip`, `box-decoration-break`, and `letter-spacing` can add some _wow factor_. Preethi Sam [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/cb439117.png)](https://master.dev/courses/frontend-architecture/?utm_source=email&utm_medium=frontendfocus&utm_content=frontendcooper) [Frontend Architecture: Monoliths to Microfrontends](https://master.dev/courses/frontend-architecture/?utm_source=email&utm_medium=frontendfocus&utm_content=frontendcooper) β€” Maxi Ferreira walks through modular monoliths, monorepos, and microfrontends so you can pick the right structure for your codebase and know the real cost before you commit. Master.dev sponsor β–Ά[A Pragmatic Guide to Browser Support](https://www.youtube.com/watch?v=uOtxiH3QiPg) β€” Rachel, a member of the CSS Working Group and Chrome team, runs through recently available CSS and JavaScript web platform additions, and how Baseline clarifies feature support for new and upcoming features. Rachel Andrew πŸ’‘ If you missed it, you can now [be notified of changes to web features you want to keep tabs on](https://web.dev/blog/baseline-alerts) with Baseline Alerts. πŸ“™ Articles, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1786534998/wxjbys9jz64i4dgmml4d.png)](https://www.bram.us/2026/08/09/unlock-diagonal-scrolling-with-css-scroll-axis-lock-none/) [Unlock Immediate Diagonal Scrolling with CSS `scroll-axis-lock: none`](https://www.bram.us/2026/08/09/unlock-diagonal-scrolling-with-css-scroll-axis-lock-none/) β€” Browsers try to be helpful and 'rail' your scrolls, locking you to one axis when your gesture is mostly one way. Fine for documents, bad for maps and zoom UIs. `scroll-axis-lock: none` switches the railing off. Chromium 153+ only for now, but it degrades gracefully. Bramus Van Damme πŸ‘€ Adam Argyle has [also taken a look at `scroll-axis-lock`](https://nerdy.dev/css-scroll-axis-lock), highlighting some use cases and noting a bug he found. [Join Sentry Live: How Etsy Stays Crash-Free](https://sentry.io/resources/etsy-workshop/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=ecommerce-fy27q3-etsyworkshop&utm_content=newsletter-sponsored-link-register) β€” Sentry and Etsy break down how they prep for peak traffic and debug in real time. Sentry sponsor [How _Baseline_ Can Help You Ship Less JavaScript](https://www.smashingmagazine.com/2026/08/how-baseline-can-help-ship-less-javascript/) β€” Shares a practical approach to auditing your dependencies: Grouping them into clusters (`Intl`, HTTP, UI primitives, `lodash`), questions to ask before deleting things, and more. Jad Joubran [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1786530351/emw8vtxt26at0wwozlhw.png)](https://lea.verou.me/blog/2026/dark-mode-toggles/) [Dark Mode Toggles: Two States are Enough](https://lea.verou.me/blog/2026/dark-mode-toggles/) β€” A look at how to implement a good dark mode toggle. Lea reminds us that users do not seek out solutions to problems they don’t currently have, and that when it comes to a toggle for dark mode we don't need every state visible in the UI. Lea Verou [HTML Over WebSockets: Real-Time SPAs With Barely Any JavaScript](https://en.andros.dev/blog/ef4968f5/html-over-websockets-real-time-spas-with-barely-any-javascript/) β€” This idea isn't new, but Andros notes it's gained traction recently. Here he outlines a real-time, bidirectional approach, explaining how it works and when it pays off compared to other methods. Andros Fenollosa [Your SPA is Leaking Memory: 'Soak Test' It](https://denodell.com/blog/your-spa-is-leaking-memory-soak-test-it) β€” A look at how to run a Playwright 'soak test' that loops a user flow, watches Chrome's DOM node and listener counts, and fails CI when a memory leak creeps in. Den Odell [Improved CSS Text-Stroke](https://tylersticka.com/journal/improved-css-text-stroke/) β€” A quick tutorial on getting a much nicer looking, more legible text-stroke effect. Tyler Sticka [Can We Make Default Tailwind a More Accessible Choice?](https://spatie.be/blog/can-we-make-default-tailwind-a-more-accessible-choice) Nick Bevers [Why Tiny JPEGs Look Different in Chrome](https://guillaumetech.github.io/posts/jpg-scaling-chrome/) Guillaume TΓ©cher 🧰 Tools, Code & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/wz5nf3s7q7jphxbgq0js.jpg)](https://termdom.org/) [TermDOM: Build Terminal UIs with HTML, CSS and the DOM](https://termdom.org/) β€” Take your web development skills to the terminal with this new project from the creator of [Crank.js](https://crank.js.org/). Build Node, Bun or Deno-powered TUIs with vanilla JS or any frontend framework. (Flexbox and forms? Yes. CSS Grid? Not yet.) Brian Kim [The Slowest Part of Your UI Is a Backend Query](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter) β€” TimescaleDB extends Postgres so the query behind the render returns fast at scale. [Get $1000 credit to start](https://www.tigerdata.com/go/trial?utm_source=content-syndication&utm_medium=referral&utm_campaign=frontend-focus-newsletter). Tiger Data (creators of TimescaleDB) sponsor [WCAG-EM Report Tool](https://www.w3.org/WAI/eval/report-tool/) β€” A web-based tool from the W3C that turns your accessibility evaluation findings into a report. Freshly updated to [WCAG-EM 2](https://www.w3.org/TR/WCAG-EM/), which widens its scope beyond websites. W3C πŸ€– [use-webmcp-tool: A Hook for Using WebMCP](https://github.com/GoogleChromeLabs/use-webmcp-tool) β€” [WebMCP](https://developer.chrome.com/docs/ai/webmcp) is an in-development web standard for exposing page-based JavaScript functions for AI agents to use. Sarah Drasner (Google Chrome Labs) [Morphicons: Morphing Library for Stroke-Based Icons](https://www.morphicons.com/) β€” To morph an icon, all you do is change a prop. The live demo on the homepage demonstrates the effect well. I like it! Guillermo LΓ³pez [Dot Matrix: 55+ Dot Matrix-Style Loading Animations, Built With React & Tailwind](https://dotmatrix.zzzzshawn.cloud/) β€” Easily customize the color of the animated 'dots' and you can install via the shadcn registry. Toggle dark/light on the page to see the animations on different backgrounds. [Source](https://github.com/zzzzshawn/matrix). Shawn [Critical CSS Generator](https://kigo.studio/tools/critical-css-generator) β€” Enter your URL and this will extract the minimal CSS needed to render above-the-fold content. Kigo Studio πŸ“° Classifieds πŸ€– Your agent can read a PDF, but can it sign one? [Here's how to wire up 30+ PDF tools over MCP](https://developer-api.foxit.com/developer-blogs/api-guides-tutorials/agentic-document-workflows/?utm_source=draftdev&utm_medium=newsletter&utm_campaign=frontendfocus_20260812) so it can convert, extract and sign too. πŸ”§ ...and finally [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1786534001/pm5wrc8icpc0exvwyqgw.png)](https://css.graphics/pipes/) [The Windows 'Pipes' Screensaver Built in CSS](https://css.graphics/pipes/) β€” Here's the [much-loved Windows NT Pipes](https://devblogs.microsoft.com/oldnewthing/20240611-00/?p=109881) screensaver, but reimagined in CSS form. It's powered by the [cssGraphics library](https://github.com/layoutit/cssGraphics) and the [PolyCSS engine](https://github.com/LayoutitStudio/polycss) (a CSS 3D engine). Layoutit πŸ‘‹ We'll see you again in two weeks, on August 26. πŸ“¬ **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|*)