Links
Range Syntax for Style Queries
Style queries are getting an upgrade! Like media queries, and container queries, They can now respond to a range of values, and not just predefined states. The new range syntax supercharges
@container style()queries. You can now compare custom properties, literal values, and even values from functions likeattr().
Simple One-Time Passcode Inputs
I have good news! You can ship a fully functional OTP input today without any CSS hacks or JavaScript frameworks. All you need is some HTML.
The Web Animation Performance Tier List
Performance isn’t a dark art. But is is an art. Learn what makes web animations fast, slow, and everything in between with our 2025 web animation performance tier list.
Toasts
GitHub no longer uses toasts because of their accessibility and usability issues.
While it can be tempting to use toast UI as a solution for your task, know that there are many accessibility and usability issues inherent with this pattern. Because of this, GitHub recommends using other more established, effective, and accessible ways of communicating with users.
OpenAI, ARIA, and SEO: Making the Web Worse
There are some signals in here that accessibility practitioners can decode. They’re relatively straightforward: Slurping / stealing content from div-soup React (et al) sites is hard when semantics and structure are ignored; OpenAI sees ARIA as metadata which can guide its bots; OpenAI wants authors to use ARIA to make it easier to classify and structure the data it slurps / steals; Open AI doesn’t understand ARIA conceptually.
Videos
Come to the light side: HTML Web Components
While Web Components have been around for years, they're seeing a bit of a renaissance thanks to an emerging approach for authoring them: ditch the shadow DOM and progressively enhance existing HTML. In this talk, we'll look at what Web Components, how the "HTML Web Component" approach works, why it's awesome, and some tips, tricks, and gotchas when working with them.
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! They solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.