--- title: "Are breadcrumbs 'dead' in web design?" publication: "Frontend Focus" issue: 684 published_at: "2025-03-19" canonical_url: "https://frontendfoc.us/issues/684" --- Plus the difference between web and framework components. | Together with [![Square\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_615,h_184/e_make_transparent/co_white,e_outline:7/utxf72lfvvqerntlnwwc.png)](https://fnf.dev/4ia9O6s) 🚀 **Frontend** Focus #​684 — March 19, 2025 | [Read on the web](https://frontendfoc.us/issues/684) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1742382266/rvfwsyrd0roc2d41c1cm.png)](https://frontendmasters.com/blog/overlapping-inline-backgrounds/) Image via [Frontend Masters Boost](https://frontendmasters.com/blog/overlapping-inline-backgrounds/) [A Deep Dive into the Inline Background Overlap Problem](https://frontendmasters.com/blog/overlapping-inline-backgrounds/) — If you want to get a semi-transparent background behind some inline text with nice padding you’ll likely face an overlap problem. Ana goes deep into exploring the solution along with some of the more complex variations of the issue that we could face. Ana Tudor [Introducing `command` and `commandfor`](https://developer.chrome.com/blog/command-and-commandfor) — Chrome 135 (and preview versions of Firefox and Safari) add support for two new HTML attributes, `command` and `commandfor`. They’re for adding declarative actions to HTML buttons _without_ directly requiring JavaScript. Keith Cirkel [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/19822330.png)](https://fnf.dev/4ia9O6s) [New: Secure In-Person Payments for Mobile Apps](https://fnf.dev/4ia9O6s) — Square's new Mobile Payments SDK is PCI-compliant, free to integrate, and has no API usage costs. With support for a diverse range of hardware, our in-person payment solution is reliable whether on the move, at a kiosk, or over the counter. [Try it now](https://fnf.dev/4ia9O6s). Square sponsor 🕵️‍♂️ [Buying Browser Extensions for Fun and Profit](https://secureannex.com/blog/buying-browser-extensions/) — An interesting look into the shadowy world of how browser extensions, with hundreds of thousands of users, can be easily bought — potentially by malicious proprietors. John Tucker ⚡️ IN BRIEF - 🎨 [Version 3.0](https://www.gimp.org/news/2025/03/16/gimp-3-0-released/) of open-source image editor GIMP is now available. - 🧵 Support for CSS and Baseline has [shipped in popular linter _ESLint_](https://web.dev/blog/eslint-baseline-integration?hl=en). - 🔠 The Chrome team shares [the story of why Chrome switched from FreeType to Skrifa](https://developer.chrome.com/blog/memory-safety-fonts) for font processing and the added security it offers. - 🧭 [Here are the release notes](https://webkit.org/blog/16523/release-notes-for-safari-technology-preview-215/) for Safari Technology Preview 215, which adds support for [scroll-driven animations](https://scroll-driven-animations.style). - 🦋 A brief reminder that we're [sharing frontend links and related goodness](https://go.bsky.app/BwStos9) over on Bluesky too. 📙 Articles, Opinions & Tutorials [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1742306502/ue9revqifsmx42ytolyk.jpg)](https://css-tricks.com/styling-counters-in-css/) [Styling Counters in CSS](https://css-tricks.com/styling-counters-in-css/) — A guide to styling counters, going from the most basic ways to style lists directly in HTML to advanced customization techniques that are even capable of making things that _aren’t_ lists look like lists. Juan Diego Rodríguez [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1742378054/ij0j2li424urhd5lbmoc.png)](https://ishadeed.com/article/self-gap/) [Self Gap](https://ishadeed.com/article/self-gap/) — Some thinking on how best to control a _custom_ gap between some flex or grid elements. As ever, Ahmad has code examples and solid demos to help explain the approaches considered. Ahmad Shadeed [Build Forms from JSON Schema with SurveyJS](https://surveyjs.io?utm_source=frontend_focus&utm_medium=email) — Fully customizable, white-label form builder UI by SurveyJS—seamlessly integrates with React, Angular, and Vue 3, with no backend limitations. SurveyJS sponsor [Breadcrumbs are 'Dead' in Web Design](https://webdesignerdepot.com/breadcrumbs-are-dead-in-web-design/) — Once a clear staple in web design, the author argues that they’ve now become somewhat obsolete in “_today’s non-linear, context-driven web, where dynamic and personalized navigation systems take precedence_”. Noah Davis [Design Systems Need a Color Space](https://bjango.com/articles/designsystemcolourspace/) — “_Software developers and designers have been able to ignore colour spaces for a long time, but it’s about to become required knowledge_.” Marc Edwards [Chilled Out Text Underlines](https://frontendmasters.com/blog/chilled-out-text-underlines/) — Shares a nice treatment for styling underlines. Worth keeping in mind accessibility considerations though. Chris Coyier [Styling an HTML Dialog Modal to Take the Full Height of the Viewport](https://til.simonwillison.net/css/dialog-full-height) — Simon encountered an issue with an unwanted gap appearing when using the `dialog` element. Here’s how it was solved. Simon Willison [Web Components vs. Framework Components: What’s the Difference?](https://www.smashingmagazine.com/2025/03/web-components-vs-framework-components/) — A comprehensive comparison between Web Components and framework components, discussing their definitions, strengths, weaknesses, and various performance considerations. Gabriel Shoyombo [Use Cases for the Document Picture-in-Picture API](https://developer.chrome.com/blog/document-pip-use-case) — A way to open a floating, always-on-top window (‘picture-in-picture’) that can display arbitrary HTML content. Chrome only, though. Jad Joubran [But How to Get to That European Cloud?](https://berthub.eu/articles/posts/now-how-to-get-that-european-cloud/) — A thoughtful take on a pressing need for an increase in geographically diverse web infrastructure. _Touches on broader political considerations that, naturally, not everyone may see the same way_ — but, ‘don’t put all your eggs in one basket’ is generally good advice. Bert Hubert [Leveraging Three Types of User Feedback to Create Better User Experiences](https://www.uxmatters.com/mt/archives/2025/03/leveraging-3-types-of-user-feedback-to-create-better-user-experiences.php) Mehdi Hussen [Lazy Load Background Images with the IntersectionObserver API](https://www.debugbear.com/blog/lazy-load-background-images-intersection-observer) Anna Monus [Understanding the European Accessibility Act (EAA)](https://tetralogical.com/blog/2025/03/19/understanding-the-eaa/) Léonie Watson [Making a Browser Based Game with Vanilla JS and CSS](https://www.sitepoint.com/browser-game-with-vanilla-js-and-css/) Eoin McGrath 🧰 Tools, Code & Resources [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1742376880/nqpmd5f7trlhincz53ot.png)](https://oxbowui.com/free-tools/tailwind-css-gradient-generator) [Tailwind Gradient Generator: Create CSS Gradients for Tailwind Projects](https://oxbowui.com/free-tools/tailwind-css-gradient-generator) — Select to preview any of the existing gradients in the gallery and customize the ‘direction’ of the gradient. You can also preview the gradient on text (as seen above) or just as a regular background. oxbow ui [Loadership: An Interactive Tool to Build and Customize Pure CSS Loading Animations](https://www.loadership.com/) — Click any of the dozen or so prebuilt loaders (which are unique!) and you can customize them to your liking (color, speed, size, etc). Loadership [🔒 Protect Against AI Bots, Fraud, and Abuse in Real Time](https://workos.com/radar?utm_source=cpfef&utm_medium=newsletter&utm_campaign=q12025) — WorkOS Radar protects your app with advanced device fingerprinting — stop fake signups, free tier abuse, bot attacks and brute force attempts today. WorkOS sponsor [Enhance: Enhance and Upscale Your Images Using AI](https://github.com/addyosmani/enhance) — Yet another single-purpose image editing tool from Addy Osmani, this one is a simple AI-powered image upscaler/enhancer that you can try out [online here](https://enhance.addy.ie/). Addy Osmani [svg2pdf.js: SVG to PDF Conversion in the Browser](https://github.com/yWorks/svg2pdf.js) — There’s an [online playground](http://raw.githack.com/yWorks/svg2pdf.js/master/) to give you a feel for what it can do. yWorks GmbH [shiki-stream: Generate "Streaming" Syntax Highlighted Code](https://github.com/antfu/shiki-stream) — Based on the popular Shiki syntax highlighter, this will reveal the selected code line by line (i.e. in a “stream”), which you can [play with here](https://shiki-stream.netlify.app/). Anthony Fu [Frontend Practice: A Practice Ground for Improving Frontend Skills](https://www.frontendpractice.com/) — A collection of real sites each with a spec sheet that you can use to recreate the project to improve your skills. Kyle Shook 🕰️ ICYMI (_Older links, still worth checking out_) - Moses Amama asks [whether AI can be used](https://thoughtbot.com/blog/can-ai-be-used-as-an-accessibility-testing-partner) as an accessibility testing partner. - Kirupa runs through [the things you need to know](https://www.kirupa.com/javascript/detecting_browser_zoom_changes.htm) when it comes to detecting browser zoom changes via JavaScript. - Stefan Judis explains here how a 'section' [without an accessible name](https://www.stefanjudis.com/today-i-learned/section-accessible-name/) is nothing but a 'div'. - Did you know a CDN-first approach is [no longer considered an outright performance win?](https://osvaldas.info/cdn-first-aproach-has-become-obsolete/) 📬 **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://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/684/*|UID|*?ipx=t)