Frontend Focus

Five CSS properties for eye-catching text designs

Wed, 12 Aug 2026 00:00:00 +0000

🗓️ 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

🚀 Frontend Focus

#754 — August 12, 2026 | Read on the web

99% 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 — 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

Frontend Architecture: Monoliths to Microfrontends — 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 — 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 with Baseline Alerts.

📙 Articles, Opinions & Tutorials

Unlock Immediate 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, highlighting some use cases and noting a bug he found.

Join Sentry Live: How Etsy Stays Crash-Free — 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 — 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

Dark Mode Toggles: Two States are Enough — 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 — 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 — 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 — 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?
Nick Bevers

Why Tiny JPEGs Look Different in Chrome
Guillaume Técher

🧰 Tools, Code & Resources

TermDOM: Build Terminal UIs with HTML, CSS and the DOM — Take your web development skills to the terminal with this new project from the creator of Crank.js. 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 — TimescaleDB extends Postgres so the query behind the render returns fast at scale. Get $1000 credit to start.

Tiger Data (creators of TimescaleDB) sponsor

WCAG-EM Report Tool — A web-based tool from the W3C that turns your accessibility evaluation findings into a report. Freshly updated to WCAG-EM 2, which widens its scope beyond websites.

W3C

🤖 use-webmcp-tool: A Hook for Using WebMCP — 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 — 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 — 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.

Shawn

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 so it can convert, extract and sign too.

🔧 ...and finally

The Windows 'Pipes' Screensaver Built in CSS — Here's the much-loved Windows NT Pipes screensaver, but reimagined in CSS form. It's powered by the cssGraphics library and the PolyCSS engine (a CSS 3D engine).

Layoutit

👋 We'll see you again in two weeks, on August 26.

The new CSS feature devs love most but can't rely on yet

Wed, 5 Aug 2026 00:00:00 +0000

🚀 Frontend Focus

#753 — August 5, 2026 | Read on the web

⚓️ Results from the 2026 State of CSS Survey — Developers report anchor positioning as their favorite new CSS feature of this past year, though limited support is holding it back. As for the most-used newer features? :has(), aspect-ratio, and CSS nesting came out top. The results also touch on AI uptake (or lack thereof), framework adoption, the CSS grid learning curve, and more. Worth a read to get a good sense of the lay of the land.

Sacha Greif (Devographics)

💡 Josh Comeau wrote an excellent primer on anchor positioning last month.

Get Screenshots of Your Frontend in Each PR — Greptile now runs your code to find bugs. Trex runs your PR branch in a sandbox, uses browser agents to click through your UI, and attaches screenshots and videos as evidence of the issue directly in the PR.

Greptile sponsor

Styling the Navigation: Declarative Route and Navigation Matching in CSS — A look at a new CSS spec proposal from Bramus and the Chrome team. The idea is new at-rules and pseudo-classes to style View Transitions based on where you're coming from/going to, without JavaScript. It's being presented at the CSS WG meeting this week.

Bramus Van Damme

📊 Bramus has also noticed MDN shares its pageview data and has created a viewer for it if you want to see what devs are looking up most often.

Gap Decorations Are Now Available, Here's What's New — Chrome and Edge 149 are first to ship CSS gap decorations letting you style the space between grid and flex items without pseudo-element hacks. Sam, from the Edge team that drove the feature, shows off the new rule shorthand and friends.

Sam Davis Omekarajr

⚡️ IN BRIEF

🗓️ Come together, write and celebrate all things HTML this Saturday — it's HTML Day 2026 with gatherings all around the world.
🆕 Rachel Andrew shares an update on what's new in Chrome 151, including a user-activated control for camera and microphone streams.
🤖 The Chrome team shares a detailed look at how they're using AI to make Chrome more secure.
🤖 New EU rules require companies to label certain AI-generated content.
⛳️ This page tasks you with mowing a lawn as efficiently as possible, but it's also a neat look at how to display things in an interactive, engaging way.

📙 Articles, Opinions & Tutorials

Something Nobody Told You About The Image Element: It Can Overflow! — The <img> element has overflow: clip applied by default (not something most of us will have noticed, I'd imagine). Temani digs into why, and what happens when you make that hidden overflow visible.

Temani Afif

The CSS lh unit — An accessible look at the line height unit, how it works and some use cases you may want to consider.

Ahmad Shadeed

A Perfect Lighthouse Score Can't Fix a 4s Query — TimescaleDB extends Postgres so the query behind the score returns fast at scale. Get $1000 credit to start.

Tiger Data (creators of TimescaleDB) sponsor

Five Best Practices for Preventing Chaos in Tailwind CSS — Originally published in 2023 and refreshed for 2026, it now includes a tailwind-best-practices skill you can give to an agent, if you like.

Nina Torgunakova

We Finally Learned to Center a Div, Then Browsers Added Sidebars — When a sidebar can change what the 'center' is, do we need to target the middle of a browser window rather than the webview?

seg6

Web Security is Too Hard — After trying a new Cloudflare product, Eric encountered several issues that gave him pause and distilled them into practical security advice.

Eric Lawrence

TIME Is Serving AI Bots a Different Website, With Ads Built In — TIME is, amongst other things, letting ChatGPT's search index bot in to view Markdown, but blocking the training agents altogether.

Vincent Schmalbach

Cheatsheets for Flex, Grid, Anchor Positioning, and Invoker Commands
Polypane

The Difference Between a Button and a Link
Alexander Petros

Devtools Must Be Open Source
David Crawshaw

🧰 Tools, Code & Resources

Blossom Carousel: A Native-First Carousel with Drag Support for Pointer Devices — Most carousels replace native scrolling; Blossom builds on top of it, so you keep a real scroll container's performance and accessibility, and the drag engine is only downloaded when a mouse or trackpad is detected. Try the examples.

Jesper Vos

📊 TanStack Charts: A New Way to Notate and Render Charts — A rapidly evolving, pre-alpha, framework-agnostic way to declaratively specify a large number of chart-related visualizations in JavaScript which can then be rendered to SVG or on a canvas and styled as you wish.

TanStack

Tired of Document Workflows That Break Halfway Through? — Build a durable CRM-to-eSign pipeline as one resumable Vercel Workflows function that retries after a failure.

Foxit sponsor

CSS Type Studio: A Web Tool for Fiddling with Advanced Typography with CSS — An easy-to-use tool for visually trying out all sorts of typography features, including text wrapping, kerning, OpenType features, and more.

CSS Type Studio

Extend UI: An Open Source UI Kit for Modern Document Apps — Includes 15+ components for agents, user-facing document functionality, and internal tools. Think features like a PDF viewer, DOCX editor, PowerPoint viewer, E-Signature component, and so on. Source code.

Extend

ffmpeg webCLI: A Browser-Based Video Editor Powered By ffmpeg.wasm — A nicely built UI that you can try out here. Supports multiple video file types and allows you to use 30+ video operations (trim, convert, compress, flip, etc.) – all processed locally with no server upload.

Tejaswi Gowda

Neumorphism CSS Generator: A Tool to Visually Design Soft, Extruded UI Elements using CSS Box Shadows
Marko Denic

Scroll-Mask: Tailwind CSS Utilities for Fading Edges of Scroll Containers Based on Scroll Position
Tim Wilson

📰 Classifieds

⚡️Add lightning-fast barcode & QR scanning to your web app with STRICH, a lean JS SDK. Simple, predictable pricing. Free trial and demo!

📺 TV for Developers

CodeTV is a project led by Jason Lengstorf that makes educational-but-entertaining "TV for developers". Imagine the Discovery Channel but covering topics like building webapps and interviewing developers (like ▶️ this interview with Tanner Linsley about his work on TanStack).

The third season of Web Dev Challenge is currently rolling out, and the latest episode ▶️ challenges five developers to produce the 'best landing page ever' in just a few hours, with the only catch being that it has to use GSAP.

Another recent episode poses a similar challenge to several developers to ▶️ redesign their personal homepages while using the AT Protocol (commonly associated with Bluesky).

Prefer something a bit larger in scale? In ▶️ the Greenfield Games, two teams of developers go head-to-head to build working reimplementations of a job applicant tracking system with no restrictions on the tools they can use (including AI). OpenAI's Dominik Kundel and Microsoft's Scott Hanselman act as judges for the final creations.

The amazingly versatile conic-gradient()

Wed, 29 Jul 2026 00:00:00 +0000

🚀 Frontend Focus

#752 — July 29, 2026 | Read on the web

WOFF 1.0 at 16: The Format That Made Web Fonts Work — Did you know @font-face was adopted into CSS2 in 1998? But it sat largely unused amid fights over licensing, obfuscation and DRM. Chris Lilley, PNG co-author and author of W3C's 1996 case for fonts on the web, explains how the deadlock broke with the “entirely DRM-free” format we know and love.

Chris Lilley (W3C)

Your Chart is Waiting on the Database, Not the DOM — The render is instant. The query behind it isn't. TimescaleDB extends Postgres so dashboards query live data at scale, no pipeline to keep in sync. Hypertables, columnar compression, continuous aggregates. Get $1000 credit to start.

Tiger Data (creators of TimescaleDB) sponsor

∞ To infinity and Beyond, in CSS — e, pi, infinity, and NaN are all widely supported constants accepted in CSS math functions, and Adam runs through several ways going to infinity can improve your designs.

Adam Argyle

The Launch of CodePen 2.0 — CodePen has been a reliable piece of web development infrastructure for 14 years and now the experience has gone 2.0 with an all-new editor, and lots of goodies for paid users like the ability to quickly deploy pens to a CodePen subdomain.

Chris Coyier

⚡️ IN BRIEF

🍪 Kill the Cookie Banner is a campaign from NOYB, EFF and others backing an EU proposal to replace cookie banners with a browser privacy signal.
🦊 First teased a couple of months ago, Firefox's new design is now ready to try out in Nightly builds.
🔵 Safari 26.6 has been released with several bug fixes and refinements.
📰 Chrome has finally come to Linux on ARM64, complete with Widevine DRM.
🤔 Joost de Valk ponders the future of the website.

📙 Articles, Opinions & Tutorials

When You Need To Make a Triangle, Think Conic Gradients — conic-gradient() is more flexible than you might imagine! You can make pie segments, ray bursts, or triangles, and use transitions on them too.

Chris Coyier

Measuring Component Performance with the Container Timing API — Chrome's origin trial for the Container Timing API lets you tag a DOM region with a containertiming attribute and track each contentful part as it paints. It won't tell you when a component is finished, though.

Harry Roberts

When and What Should You Actually Log? — The difference between logs that help you debug and logs that just cost you. Get tips here.

Sentry sponsor

Paint the Static Image First, Fetch the Animation After — Andy's elaborate animated banner weighs half a megabyte, so now a static AVIF paints first with the animated SVG only fetched on screens big enough to do it justice.

Andy Clarke

Handling Concurrency on the Web with Web Locks API — A practical walkthrough of stopping multiple tabs from racing each other, thanks to the widely available Web Locks API.

Cesar Contreras

The Core Web Vitals Thresholds You Trust Might Be Wrong — RUM data from ten retailers suggests Google's 2.5s 'good' LCP threshold is too lenient, with optimal engagement arriving between 100ms and 1 second.

Tammy Everts

In-N-Out Animation Using sibling-index() — A neat technique for improving animations when adding/removing elements.
Temani Afif

SVG Filter Text Effects: Letterpress, Ink Gain, Woodtype — Practical examples, with code, of what SVG can do.
Carmen Ansio

Rendering OKLCH Color Space in Real Time with WebGL
Dima Kryaklin

🧰 Tools, Code & Resources

Stolen Buttons — One designer's hobby is 'stealing' buttons from the sites they visit. It's quite the collection and certainly reflects the current design zeitgeist. There's a browser extension if you want to make your own similar hoard.

Anatoly Zenkov

Canvas UI: A Creative Canvas and WebGL Component Library — An open source, framework agnostic library of cutting edge HTML-in-Canvas and WebGL components you can copy and paste. This has received a lot of kudos on social media this week.

David Haz

Building an AI Workflow UI in React? Start With JointJS — A real data model, polished UX, and performance that scales with your canvas. Skip months of building.

JointJS sponsor

🌐 MapLibre GL JS 6.0: Interactive Vector Maps for the Web — A WebGL-powered library for rendering interactive vector tile maps. Version 6 goes ESM-only, requires WebGL 2, and lands broad performance gains. Release notes and a v5 to v6 migration guide.

MapLibre

Markdy: Like Mermaid but for Animations and Motion — Instead of writing animations in CSS or JavaScript, you use a simpler language focused on core animation concepts (akin to Mermaid with diagrams). The examples are neat.

Hoang Yell

KaTeX: Fast Math to HTML Typesetting for the Web — Based on Donald Knuth’s TeX, KaTeX provides a no-dependency way to rapidly render TeX math expressions in a predictable manner, regardless of environment. The sandbox demo page shows off how smooth it is.

Emily Eisenberg and Sophie Alpert

🎁 And finally…

Dither It: An Online Image Dithering Tool — Drag in an image and play around with settings, palettes, and more to get the vibe you want. Josh W. Comeau recommended this tool on Bluesky recently, and his thread has much better examples than my attempt above… 😅

Alex Harris

Rebuilding the World Cup table with CSS Subgrid

Wed, 22 Jul 2026 00:00:00 +0000

🚀 Frontend Focus

#751 — July 22, 2026 | Read on the web

⚽️ Rebuilding FIFA's Standings Layout with CSS Subgrid — The World Cup is over now, but this is an interesting design problem worth unpicking and understanding. Ahmad approaches it with CSS grid, subgrid, and more, showing how to achieve a responsive, complex layout. Clean result, no messi. Excellent visual explainer, with code examples aplenty.

Ahmad Shadeed

How to Write Logs That Actually Help (Live Workshop) — When your app breaks at 2am, do your logs actually tell you anything? This workshop covers what to capture and how to structure your logs so "something broke" turns into "here's exactly what happened."

Sentry sponsor

📱 Low and Mid-Tier Mobile for the Real World — An update to a guide on picking representative test devices in 2026 (while reminding us that the newest phone isn't always the right one). This year's picks include the Galaxy A17 5G (5th best-seller globally in Q1) and Galaxy A56 5G (Europe's 2025 #1).

Harry Roberts

How Figma Built Accessibility Into a Canvas-Based Product — Canvas-rendered UIs get none of the browser's accessibility features for free, so Figma had to recreate screen reader support, keyboard navigation, and focus management from scratch.

David Winslow & Elynn Lee (Figma)

⚡️ IN BRIEF

🦊 Firefox 153 arrived yesterday, bringing Picture-in-Picture API support on desktop, improved popover="hint", and Native Containers in preview. Here are the developer release notes.
📑 Here's the latest draft of EPUB 3.4, the digital doc/eBook format built on HTML, CSS, and other web tech. It's now a Candidate Recommendation Draft.
🪐 Version 7.1 of Astro is out now, adding finer CSP control for inline scripts and styles, full control over pagination URLs, and more.
⚠️ Hackers have recently exploited two critical WordPress flaws. The issue has been patched, but around 90 million sites could still be vulnerable.

📙 Articles, Opinions & Tutorials

Time-Based Background Colour Transitions with Temporal and CSS color-mix — A nice example of using the Temporal API to grab a user's local time via PlainTime. This is then used to change a site's theme depending on the time of day. Neat!

Sophie Koonin

Return of CSS Outline — Makes the case for keeping focus outlines, a small but important accessibility detail. Plenty of sites still ship with outline: 0, found in old CSS resets, often leaving keyboard users unable to see what's focused — despite :focus-visible making this a solved problem.

Morgan Murrah

Just Shipped: JointJS for React. Build Diagramming Apps That Scale — A React diagramming library: a real data model, 100k-cell performance, and advanced UX out of the box. Try it now.

JointJS sponsor

🤖 Which AI Actually Reads Your Site? Two Months of LLM Traffic, Measured — You can make your site readable by LLMs, but do such 'AI SEO' efforts work? After tracking server logs for two months, here's a look at how it can shake out.

Rita Klubochkina

Under My Radar: The Highlight API, text-indent and font-family: math — Spotlights three CSS features that are now Baseline: the Custom Highlight API for DOM-free text highlighting, text-indent for print-style typography, and font-family: math for accessible formula rendering. Code and demos included for all three.

Brecht De Ruyte

Masonry (with Animation) in CSS — Chris explores fluid animation in masonry-style layouts using CSS Grid and Anchor Positioning, with a nod to the newly-arriving grid-lanes.

Chris Coyier

Animating the <details> Element with Only CSS — A clean way to animate this HTML element, toggling the open/close with pure CSS.

Austin Gil

100 Ways to Center an Element with CSS — Though over half of them are not recommended for use.
Temani Afif

Regressive JPEGs: Animations Smuggled Inside an Ordinary JPEG — A cute bit of JPEG format spelunking.
Maurycy

How to Host a Static Site on AWS for the Price of a Domain
Jenn Randall

Throwing Confetti with CSS random()
Schalk Neethling

Use Cases for aria-expanded
Steve Frenzel

🧰 Tools, Code & Resources

Jelly UI: Soft Web Components — A dependency-free web components library that brings 'soft' physics effects to native HTML controls. There's 40 elements included, and you can get a feel for them via the showcase.

bmson

Introducing Babylon Lite: A Smaller, WebGPU-Only 3D Engine — BabylonJS is a powerful, long-standing 3D engine for the web. But the Babylon team have had a go at creating something new from scratch. The result is Lite — a much faster and smaller engine (with some tradeoffs).

Babylon.js Team

Fast Charts Start With a Fast Query — TimescaleDB extends Postgres so dashboards query live data at scale. No second database. Get $1000 credit to start.

Tiger Data (creators of TimescaleDB) sponsor

📊 Framework Benchmarks: Compare Frontend Frameworks — An experienced dev built the same weather app in numerous frameworks (Angular, React, etc…) along with an automated benchmarking system for them. Here's the results, covering bundle size, build time, UX metrics, and more.

Alicia Sykes

edge-aura: Give Your Viewport an Organic Screen-Edge Glow — A Canvas 2D effect for adding a full-viewport organic glow at the screen edge with no CSS required.

Takuya Jodai

A11Y.md: A Context System for Building Accessible Software by Default — Integrates with your AI agents (Cursor, Claude, etc.), based on 'enforceable rules' aligned with WCAG guidelines.

Felipe Arriaga Carriço

👀 ...and finally

Decoy Font: A TTF Font That Hides What You Type — A free font designed to hide what you're typing from AI by misleading it with a 'decoy'. The font uses "separate spatial frequencies to communicate two different letters in the same space". I found slightly blurring my vision made this easier to see. An interesting experiment!

Mixfont