Frontend Focus 🚀

Thinking Deeply About Theming and Color Naming | CSS-Tricks Today, I want to discuss a couple of patterns for naming color palettes that the community is using, and how I propose we can improve, so we achieve both flexibility and beauty.

Thinking Deeply About Theming and Color Naming: https://css-tricks.com/thinking-deeply-about-theming-and-color-naming/

Why Semantic HTML Still Matters If you want to build for performance, accessibility, discoverability, or resilience, you must start with HTML that means something.

Why Semantic HTML Still Matters: https://www.jonoalderson.com/conjecture/why-semantic-html-still-matters/

Divertiti con i video e la musica che ami, carica contenuti originali e condividi tutto con amici, familiari e con il mondo su YouTube.

Cascading Layers of !mportance: https://www.youtube.com/watch?v=4PkhzoFLJ0Q

Drawing CSS icons for fun… and dark mode — HTeuMeuLeu.com In 2022, I offered my help to redesign one of my favorite newsletter: Switch Weekly, curated by Chris Brandrick. As a Nintendo fan, I figured this was perhaps the closest I could ever get to work on a Nintendo related newsletter. This was also a great opportunity to try and experiment new things without a dreadly deadline.

Drawing CSS Icons for Fun… and Dark Mode: https://www.hteumeuleu.com/2025/css-icons/

The web isn’t URL-shaped anymore Why SEO’s page-centric thinking is broken, and how machines are changing the rules of the web.

The Web Isn’t URL-Shaped Anymore: https://www.jonoalderson.com/conjecture/url-shaped-web/

Accessibility Support: Will Your Code Work with Assistive Technologies? https://a11ysupport.io/

LukeW | AI Has Flipped Software Development LukeW Ideation + Design provides resources for mobile and Web product design and strategy including presentations, workshops, articles, books and more on usability, interaction design and visual design.

AI Has Flipped Software Development: https://www.lukew.com/ff/entry.asp?2112

A Few Things About the Anchor Element’s href You Might Not Have Known Writing about the big beautiful mess that is making things for the world wide web.

A Few Things About The Anchor Element’s `href` You Might Not Have Known: https://blog.jim-nielsen.com/2025/href-value-possibilities/

YouTube video by JSHeroes Built-in accessibility: blessing or curse? - Hidde de Vries | JSHeroes 2025

📺 Video of my talk ‘Built-in accessibility: blessing or curse?’ from JS Heroes is out! youtu.be/GvYz9Qfy8j4?...

TLDW: yes it's good to try and build in accessibility, but be careful not to overpromise. It's not trivial or a one off, but it is worthwhile!

A Quick Guide to a Multi-Language Astro Site • FarrosFR A step-by-step guide to setting up a basic multi-language (EN/ID) blog in Astro. Essential for improving your site's SEO and accessibility.

A Quick Guide to a Multi-Language Astro Site: https://farrosfr.com/blog/a-quick-guide-to-a-multi-language-astro-site/

Screenshot of Frontend Focus email newsletter.

💌 A once–weekly roundup of the best #frontend news, articles and tutorials.

HTML, CSS, WebGL, Canvas, browser tech, and more: frontendfoc.us

una.im | Creating a scroll-spy with 2 lines of CSS scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.

scroll-target-group is coming to Chrome 140 (stable next month)!

Building on CSS carousel APIs, scroll-target-group lets you "enhance" elements into scroll markers, enabling you to build this scroll-spy effect in 2 lines of CSS!

Makes for a great progressive enhancement!

una.im/scroll-targe...

HTML Energy HTMl Day is on August 2nd, 2025!

On Saturday, August 2nd, 2025, we'll be gathering in places around the world to write and celebrate HTML. Join us ❇️

html.energy/html-day/202...

State of HTML 2025 Take the State of HTML survey

State of HTML is live now!

Please take it if you care about the web platform! 🙂

These surveys are super helpful for our team to understand the state of the ecosystem and prioritize missing features/platform needs!

survey.devographics.com/en-US/survey...

A Better API for the Intersection and Mutation Observers | CSS-Tricks Zell discusses refactoring the Resize, Mutation, and Intersection Observer APIs for easier usage, demonstrating how to implement callback and event listener patterns, while highlighting available options and methods.

A Better API for the Intersection and Mutation Observers: https://css-tricks.com/a-better-api-for-the-intersection-and-mutation-observers/ (Zell refactors both the Mutation and Intersection Observers into something "way simpler to use".)

Screenshot of email newsletter

Issue 698 of Frontend Focus is out now: frontendfoc.us/issues/698

A guide to Scroll-driven Animations with just CSS CSS animations have come a long way since Apple first introduced them to the web in 2007.

A Guide to Scroll-Driven Animations with Just CSS: https://webkit.org/blog/17101/a-guide-to-scroll-driven-animations-with-just-css/

Why JPEG Became the Web's Favorite Image Format The JPEG Image Standard and its compression techniques made high-quality photography widely accessible on the internet.

How JPEG Became the Internet’s Image Standard: https://spectrum.ieee.org/jpeg-image-format-history

CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control — Smashing Magazine CSS can be unpredictable — and specificity is often the culprit. Victor Ayomipo breaks down how and why your styles might not behave as expected, and why understanding specificity is better than relying on `!important`.

CSS Cascade Layers Vs. BEM Vs. Utility Classes: Specificity Control - https://www.smashingmagazine.com/2025/06/css-cascade-layers-bem-utility-classes-specificity-control/

Liquid Glass, but in CSS This past week marked the start of WWDC25, Apple's yearly developer conference where they reveal new platforms, technologies, and (most relevant here) design languages. During the presentation they released their newest iteration, dubbed Liquid Glass. I have _a lot_ of thoughts on this new language, but my immediate thought while I was watching the presentation was "I wonder if CSS can do that". It turns out, yes, with great effort, it can.

Liquid Glass, But in CSS: https://atlaspuplabs.com/blog/liquid-glass-but-in-css

Screenshot of email newsletter

Issue 698 of Frontend Focus is out now: frontendfoc.us/issues/698

A short history of web bots and bot detection techniques · OlegWock Did you know your favorite website can detect when you're browsing it in public transport or when you scroll it in your bed? Moreover, this info sometimes helps them to fight bots.

A Short History of Web Bots and Bot Detection Techniques: https://sinja.io/blog/bot-or-not

Contrast Report - WCAG Colour Contrast Checker Straightforward colour contrast checker with Picture-in-picture (PiP) mode.

Contrast Report: A Simple WCAG Colour Contrast Checker - https://contrast.report/

stylish SVG Backgrounds for your websites and designs | Mossaik Improve the retention of visitors on your website by creating an attractive SVG background design to capture their attention and reduce the bounce rate.

Mossaik: A Web-Based Tool to Create Stylish SVG Backgrounds - https://mossaik.app/

Auf YouTube findest du die angesagtesten Videos und Tracks. Außerdem kannst du eigene Inhalte hochladen und mit Freunden oder gleich der ganzen Welt teilen.

Why Visual Website Builders Didn't Take Off: https://www.youtube.com/watch?v=BK_71QjkZmA

Lessons Learned from Implementing an Inline Document Viewer Recently, my team created a document preview feature. Here are the lessons we learned implementing an inline document viewer.

Lessons Learned from Implementing an Inline Document Viewer: https://spin.atomicobject.com/inline-document-viewer/

State of CSS 2025 Take the State of CSS survey

Still a week left to take the State of CSS survey!

The survey hasn't got as many responses as last year, so any help sharing will be much appreciated :)

survey.devographics.com/en-US/survey...

State of CSS 2025 Take the State of CSS survey

The State of CSS survey is live!

Please take a moment to fill it out 🙂

It really helps us make more informed decisions on how to focus our web platform (CSS & UI) engineering and DevRel efforts!

survey.devographics.com/en-US/survey...

What I Wish Someone Told Me When I Was Getting Into ARIA — Smashing Magazine [Accessible Rich Internet Applications (ARIA)](https://www.w3.org/WAI/standards-guidelines/aria/) is an inevitability when working on web accessibility. That said, it’s everyone’s first time learning ...

ARIA! It exists and on a long enough timeline you'll need to use it. Here's how to get into the right headspace to do so! #a11y www.smashingmagazine.com/2025/06/what...

YouTube video by Syntax Why did Figma buy a CMS?

Woah - Figma just acquired Payload?!

Interesting move to acquire a CMS - seem like part of their Figma to AI + Code strategy?

www.youtube.com/watch?v=6wvo...