Friday Front-End
@fridayfrontend.com
Front-end dev links posted daily, emailed weekly. We also offer @cssbasics.fridayfrontend.com for beginners! Curated by @spaceninja.com
Responsive Letter Spacing: "What we wanted was a gradual transition: As the font-size increases, the letter-spacing decreases. And ideally, that would happen everywhere by default. Thankfully, modern #CSS was up to the challenge. And it only took one rule to pull off!" cloudfour.com/thinks/respo...
Responsive Letter Spacing
Minimizing the readability impact of a typographic brand requirement.
cloudfour.com
November 24, 2025 at 6:02 PM
Responsive Letter Spacing: "What we wanted was a gradual transition: As the font-size increases, the letter-spacing decreases. And ideally, that would happen everywhere by default. Thankfully, modern #CSS was up to the challenge. And it only took one rule to pull off!" cloudfour.com/thinks/respo...
Today's lunch video is "Come to the Light Side: HTML #WebComponents" - "While Web Components have been around for years, they're seeing a renaissance thanks to an emerging approach for authoring them: ditch the shadow DOM and progressively enhance existing HTML." www.youtube.com/watch?v=uIuf...
Come to the light side: HTML Web Components — Chris Ferdinandi (11ty Conf 2024)
This was a talk given at the 11ty International Symposium on Making Web Sites Real Good (2024): https://conf.11ty.dev/2024/come-to-the-light-side-html-web-components/
While Web Components have been…
www.youtube.com
November 21, 2025 at 7:30 PM
Today's lunch video is "Come to the Light Side: HTML #WebComponents" - "While Web Components have been around for years, they're seeing a renaissance thanks to an emerging approach for authoring them: ditch the shadow DOM and progressively enhance existing HTML." www.youtube.com/watch?v=uIuf...
OpenAI, ARIA, and SEO: Making the Web Worse: "Accessibility practitioners who’ve bothered to check in on the ChatGPT interfaces over the years have demonstrated the OpenAI team largely fails to understand HTML, let alone any aspect of accessibility." #a11y adrianroselli.com/2025/10/open...
OpenAI, ARIA, and SEO: Making the Web Worse
OpenAI has announced it’s launched a new browser, Atlas, with ChatGPT built in. For those familiar with ARIA, OpenAI outlines what to expect (I left the code as I found it, other than removing the…
adrianroselli.com
November 21, 2025 at 6:04 PM
OpenAI, ARIA, and SEO: Making the Web Worse: "Accessibility practitioners who’ve bothered to check in on the ChatGPT interfaces over the years have demonstrated the OpenAI team largely fails to understand HTML, let alone any aspect of accessibility." #a11y adrianroselli.com/2025/10/open...
Toasts: "GitHub no longer uses toasts because of their accessibility and usability issues." #a11y primer.style/accessibilit...
Toasts
GitHub no longer uses toasts because of their accessibility and usability issues.
primer.style
November 20, 2025 at 6:04 PM
Toasts: "GitHub no longer uses toasts because of their accessibility and usability issues." #a11y primer.style/accessibilit...
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." #CSS motion.dev/blog/web-ani...
The Web Animation Performance Tier List - Motion Blog
Learn what makes web animations fast, slow, and everything in between with our 2025 web animation performance tier list.
motion.dev
November 19, 2025 at 6:01 PM
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." #CSS motion.dev/blog/web-ani...
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." #a11y cloudfour.com/thinks/simpl...
Simple One-Time Passcode Inputs
Fully functional OTP entry may be easier than you think.
cloudfour.com
November 18, 2025 at 6:03 PM
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." #a11y cloudfour.com/thinks/simpl...
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 style queries." #CSS una.im/range-style-...
una.im | Range Syntax for Style Queries
Learn how to use the new range syntax for CSS style queries and the if() function.
una.im
November 17, 2025 at 6:02 PM
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 style queries." #CSS una.im/range-style-...
Today's lunch video is "Easier Site-Wide Theming with Style Queries" - Style queries make it easier to track things like light and dark theme, which may be set by both a system preference and a user setting. #CSS www.youtube.com/watch?v=E8M6...
Easier Site-Wide Theming with Style Queries
✅ Part one of this series: https://youtu.be/WP5CC5yawfs
✅ Code from this video: https://codepen.io/kevinpowell/pen/QwbYwXv??editors=1100
✅ Style Query support table:…
www.youtube.com
November 14, 2025 at 7:30 PM
Today's lunch video is "Easier Site-Wide Theming with Style Queries" - Style queries make it easier to track things like light and dark theme, which may be set by both a system preference and a user setting. #CSS www.youtube.com/watch?v=E8M6...
ChatGPT's Atlas: The Browser That's Anti-Web: "OpenAI released something new: the first browser that actively fights against the web. Let's talk about what that means, what dangers there are, and why it probably needs a warning label when you install it." #AI www.anildash.com//2025/10/22/...
ChatGPT's Atlas: The Browser That's Anti-Web - Anil Dash
A blog about making culture. Since 1999.
www.anildash.com
November 14, 2025 at 6:03 PM
ChatGPT's Atlas: The Browser That's Anti-Web: "OpenAI released something new: the first browser that actively fights against the web. Let's talk about what that means, what dangers there are, and why it probably needs a warning label when you install it." #AI www.anildash.com//2025/10/22/...
Your URL Is Your State: "A deep dive into how thoughtful URL design can enhance usability, shareability, and performance. Learn what state belongs in URLs, common pitfalls to avoid, and practical patterns for modern web apps." alfy.blog/2025/10/31/y...
Your URL Is Your State
A deep dive into how thoughtful URL design can enhance usability, shareability, and performance. Learn what state belongs in URLs, common pitfalls to avoid, and practical patterns for modern web apps.
alfy.blog
November 13, 2025 at 6:02 PM
Your URL Is Your State: "A deep dive into how thoughtful URL design can enhance usability, shareability, and performance. Learn what state belongs in URLs, common pitfalls to avoid, and practical patterns for modern web apps." alfy.blog/2025/10/31/y...
Some practical examples of #CSS view transitions to elevate your UI: "Declan Chidlow here with some really practical uses of view transitions, along with some of the stuff that will trip you up, with guidance to help you navigate that." piccalil.li/blog/some-pr...
Some practical examples of view transitions to elevate your UI
Declan Chidlow here with some really practical uses of view transitions, along with some of the stuff that will trip you up, with guidance to help you navigate that.
piccalil.li
November 12, 2025 at 6:01 PM
Some practical examples of #CSS view transitions to elevate your UI: "Declan Chidlow here with some really practical uses of view transitions, along with some of the stuff that will trip you up, with guidance to help you navigate that." piccalil.li/blog/some-pr...
Staggered Animation with #CSS sibling-* Functions: "This post covers a demo where selecting an item causes the preceding and succeeding items to disappear sequentially from the outside." frontendmasters.com/blog/stagger...
Staggered Animation with CSS sibling-* Functions
The new CSS sibling-index() (and -count()) functions are perfect for staggered timing affects. This goes a little step further staggering both before and after a selected element.
frontendmasters.com
November 11, 2025 at 6:02 PM
Staggered Animation with #CSS sibling-* Functions: "This post covers a demo where selecting an item causes the preceding and succeeding items to disappear sequentially from the outside." frontendmasters.com/blog/stagger...
Magnificent SVGs With
Smashing Animations Part 6: Magnificent SVGs With <use> And CSS Custom Properties — Smashing Magazine
SVG is one of those web technologies that’s both elegant and, at times, infuriating. In this article, pioneering author and web designer Andy Clarke explains his technique for animating SVG elements…
www.smashingmagazine.com
November 10, 2025 at 6:01 PM
Magnificent SVGs With
Today's lunch video is "A Simple Guide to Color Contrast in Web Design" - "As a web designer, you have to get colour contrast right. So how do you know what’s correct in each scenario and if your designs meet the standard? Matt Brunton shows you how." #a11y www.youtube.com/watch?v=shoX...
A Simple Guide to Color Contrast in Web Design
As a web designer, you have to get colour contrast right. So how do you know what’s correct in each scenario and if your designs meet the standard? Matt Brunton shows you how.
Learn to create…
www.youtube.com
November 7, 2025 at 7:30 PM
Today's lunch video is "A Simple Guide to Color Contrast in Web Design" - "As a web designer, you have to get colour contrast right. So how do you know what’s correct in each scenario and if your designs meet the standard? Matt Brunton shows you how." #a11y www.youtube.com/watch?v=shoX...
Inlining Critical #CSS: Does It Make Your Website Faster? "Learn what critical CSS is, how to inline it to improve page load #performance, and understand the trade-offs before implementing it on your website." www.debugbear.com/blog/critica...
Inlining Critical CSS: Does It Make Your Website Faster? | DebugBear
Learn what critical CSS is, how to inline it to improve page load performance, and understand the trade-offs before implementing it on your website.
www.debugbear.com
November 7, 2025 at 6:03 PM
Inlining Critical #CSS: Does It Make Your Website Faster? "Learn what critical CSS is, how to inline it to improve page load #performance, and understand the trade-offs before implementing it on your website." www.debugbear.com/blog/critica...
I Built the Same App 10 Times: "I needed to choose a framework for a mobile-first app, comparing Next.js, SolidStart, SvelteKit, Nuxt, and more. The measurements revealed dramatic differences in bundle sizes, #performance, and the real cost of framework choices." www.lorenstew.art/blog/10-kanb...
I Built the Same App 10 Times: Evaluating Frameworks for Mobile Performance | Loren Stewart
I needed to choose a framework for a mobile-first app at work. I started comparing Next.js, SolidStart, and SvelteKit, then expanded to 10 frameworks. The measurements revealed dramatic differences…
www.lorenstew.art
November 6, 2025 at 6:02 PM
I Built the Same App 10 Times: "I needed to choose a framework for a mobile-first app, comparing Next.js, SolidStart, SvelteKit, Nuxt, and more. The measurements revealed dramatic differences in bundle sizes, #performance, and the real cost of framework choices." www.lorenstew.art/blog/10-kanb...
Custom Asidenotes: "In which I turn inline asides into robustly enhanced sidenotes with CSS and just a touch of JS." #WebComponents meyerweb.com/eric/thought...
Custom Asidenotes
In which I turn inline asides into robustly enhanced sidenotes with CSS and just a touch of JS.
meyerweb.com
November 5, 2025 at 6:02 PM
Custom Asidenotes: "In which I turn inline asides into robustly enhanced sidenotes with CSS and just a touch of JS." #WebComponents meyerweb.com/eric/thought...
Start implementing view transitions on your websites today: "The View Transition API allows us to animate between two states with relative ease. They can be used to animate filtering, sorting, add to cart, page transitions, and much more." #CSS piccalil.li/blog/start-i...
Start implementing view transitions on your websites today
Browser support for view transitions is rocketing and there's not many better out there to help you understand how to implement them than Cyd Stumpel.
piccalil.li
November 4, 2025 at 6:02 PM
Start implementing view transitions on your websites today: "The View Transition API allows us to animate between two states with relative ease. They can be used to animate filtering, sorting, add to cart, page transitions, and much more." #CSS piccalil.li/blog/start-i...
Perfectly Pointed Tooltips: A Foundation: "The Anchor Positioning API in #CSS is very powerful. This is the beginning of a series where we understand it through the perfect use-case: tooltips." frontendmasters.com/blog/perfect...
Perfectly Pointed Tooltips: A Foundation
The Anchor Positioning API in CSS is very powerful. This is the beginning of a series where we understand it through the perfect use-case: tooltips.
frontendmasters.com
November 3, 2025 at 6:03 PM
Perfectly Pointed Tooltips: A Foundation: "The Anchor Positioning API in #CSS is very powerful. This is the beginning of a series where we understand it through the perfect use-case: tooltips." frontendmasters.com/blog/perfect...
Today's lunch video is "25 New & Rad Features of #CSS" - "A fast paced, animated, and jam packed tik-talk on CSS features from the past ~5 years. CSS has moved so fast, don't feel bad you aren't all caught up, no one is." www.youtube.com/watch?v=QW6G...
Adam Argyle - 25 new & rad feature of CSS
🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲🌲
Tickets are ON SALE for CascadiaJS 2026 -…
www.youtube.com
October 31, 2025 at 6:30 PM
Today's lunch video is "25 New & Rad Features of #CSS" - "A fast paced, animated, and jam packed tik-talk on CSS features from the past ~5 years. CSS has moved so fast, don't feel bad you aren't all caught up, no one is." www.youtube.com/watch?v=QW6G...
Identifying Accessibility Data Gaps in CodeGen Models: "Here’s where things get interesting, and hopeful. When I retested using prompts that included #a11y hints, the output improved dramatically, often going from fundamentally broken to genuinely accessible." www.aaron-gustafson.com/notebook/ide...
Identifying Accessibility Data Gaps in CodeGen Models :: Aaron Gustafson
Late last year, I probed an LLM’s responses to HTML code generation prompts to assess its adherence to accessibility best practices. The results were unsurprisingly disappointing — roughly what I’d…
www.aaron-gustafson.com
October 31, 2025 at 5:03 PM
Identifying Accessibility Data Gaps in CodeGen Models: "Here’s where things get interesting, and hopeful. When I retested using prompts that included #a11y hints, the output improved dramatically, often going from fundamentally broken to genuinely accessible." www.aaron-gustafson.com/notebook/ide...
#HTML dialog: Getting accessibility and UX right: "The HTML dialog element gives us powerful native modal capabilities, but creating dialogs that work well for all users still requires intentional accessibility and UX decisions." #a11y jaredcunha.com/blog/html-di...
HTML dialog: Getting accessibility and UX right
The HTML dialog element gives us powerful native modal capabilities, but creating dialogs that work well for all users still requires intentional accessibility and UX decisions.
jaredcunha.com
October 30, 2025 at 5:02 PM
#HTML dialog: Getting accessibility and UX right: "The HTML dialog element gives us powerful native modal capabilities, but creating dialogs that work well for all users still requires intentional accessibility and UX decisions." #a11y jaredcunha.com/blog/html-di...
Solved by #CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up: "There’s a new type of CSS scroll-state query coming: `scrolled` remembers the last direction you scrolled in, which you can use to build 'hidey bars.'" www.bram.us/2025/10/22/s...
Solved by CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up.
There’s a new type of CSS scroll-state query coming: scrolled
www.bram.us
October 29, 2025 at 5:03 PM
Solved by #CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up: "There’s a new type of CSS scroll-state query coming: `scrolled` remembers the last direction you scrolled in, which you can use to build 'hidey bars.'" www.bram.us/2025/10/22/s...
A beginner-friendly guide to view transitions in #CSS: "Learn how to bring smooth, animated navigation to multi-page apps with view transitions. With just one line of CSS, you can enable seamless transitions between pages." developer.mozilla.org/en-US/blog/v...
A beginner-friendly guide to view transitions in CSS | MDN Blog
Learn how to bring smooth, animated navigation to multi-page apps with view transitions. With just one line of CSS, you can enable seamless transitions between pages.
developer.mozilla.org
October 28, 2025 at 5:04 PM
A beginner-friendly guide to view transitions in #CSS: "Learn how to bring smooth, animated navigation to multi-page apps with view transitions. With just one line of CSS, you can enable seamless transitions between pages." developer.mozilla.org/en-US/blog/v...
Solved By Modern #CSS: Section Layout: "In this article, I take a typical section design and make it more dynamic with container queries, has, clamp, and grid. It’s an example of the potential of modern CSS, and this was just one section." ishadeed.com/article/mode...
Solved By Modern CSS: Section Layout
Building a typical section design with modern CSS.
ishadeed.com
October 27, 2025 at 5:04 PM
Solved By Modern #CSS: Section Layout: "In this article, I take a typical section design and make it more dynamic with container queries, has, clamp, and grid. It’s an example of the potential of modern CSS, and this was just one section." ishadeed.com/article/mode...