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
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...
Today's lunch video is "Light mode versus Dark mode, why not both?" — "Some people have very real physical reasons to need one mode over another. It's super easy to code up both using #CSS color-scheme." www.youtube.com/watch?v=iZ4X...
Light mode versus Dark mode, why not both? — Sara Joy (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/light-mode-versus-dark-mode/
It doesn’t have to be this way. Some people…
www.youtube.com
October 24, 2025 at 6:31 PM
Today's lunch video is "Light mode versus Dark mode, why not both?" — "Some people have very real physical reasons to need one mode over another. It's super easy to code up both using #CSS color-scheme." www.youtube.com/watch?v=iZ4X...
forced-color-adjust: none is an unavoidable foot gun: "A very long treatise on why text backplates were a bad idea. Most of the time." #a11y sarahmhigley.com/writing/forc...
forced-color-adjust: none is an unavoidable foot gun | Sarah Higley
A very long treatise on why text backplates were a bad idea. Most of the time.
sarahmhigley.com
October 24, 2025 at 5:05 PM
forced-color-adjust: none is an unavoidable foot gun: "A very long treatise on why text backplates were a bad idea. Most of the time." #a11y sarahmhigley.com/writing/forc...
Transition to the Other Side with #CSS Container Query Units: "How container queries help move an element to the opposite side of its parent container when both have dynamic responsive dimensions." ryanmulligan.dev/blog/transit...
Transition to the Other Side with Container Query Units
How container queries help move an element to the opposite side of its parent container when both have dynamic responsive dimensions.
ryanmulligan.dev
October 23, 2025 at 5:06 PM
Transition to the Other Side with #CSS Container Query Units: "How container queries help move an element to the opposite side of its parent container when both have dynamic responsive dimensions." ryanmulligan.dev/blog/transit...
#CSS :is() :where() the Magic Happens: "Both :is() and :where() come with many advantages beyond just reducing the complexity of your code and provide a lot of ways to write more flexible, useful, and maybe even a bit magical CSS." matthiasott.com/notes/css-is...
CSS :is() :where() the Magic Happens · Matthias Ott
Matthias Ott is an independent user experience designer and web design engineer from Stuttgart, Germany. He also teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design.
matthiasott.com
October 22, 2025 at 5:05 PM
#CSS :is() :where() the Magic Happens: "Both :is() and :where() come with many advantages beyond just reducing the complexity of your code and provide a lot of ways to write more flexible, useful, and maybe even a bit magical CSS." matthiasott.com/notes/css-is...
Custom #CSS Functions in the Browser: "There’s been a lot of progress in the CSS Working Group lately, but I want to draw your attention to a prototype that landed in Chromium Canary. Author-defined Functions are coming to CSS, and you can experiment with them now!" www.oddbird.net/2025/04/11/c...
Custom CSS Functions in the Browser
Start using author-defined functions
www.oddbird.net
October 21, 2025 at 5:04 PM
Custom #CSS Functions in the Browser: "There’s been a lot of progress in the CSS Working Group lately, but I want to draw your attention to a prototype that landed in Chromium Canary. Author-defined Functions are coming to CSS, and you can experiment with them now!" www.oddbird.net/2025/04/11/c...
Modern #CSS Round-Out Tabs: "I’m so hyped on shape(). It’s an amazing addition to CSS, giving us a primitive that can draw anything you could draw with a pen tool. We’re going to use shape() with clip-path to carve a tab out of a rectangle. No extra elements!" frontendmasters.com/blog/modern-...
Modern CSS Round-Out Tabs
We can use `shape()` to carve away the edges of an element to look like a folder tab. By hand.
frontendmasters.com
October 20, 2025 at 5:25 PM
Modern #CSS Round-Out Tabs: "I’m so hyped on shape(). It’s an amazing addition to CSS, giving us a primitive that can draw anything you could draw with a pen tool. We’re going to use shape() with clip-path to carve a tab out of a rectangle. No extra elements!" frontendmasters.com/blog/modern-...
Today's lunch video is "#CSS Anchor Positioning in Practice" - "What is Anchor Positioning? Why is it exciting? What can you use it for? How does the polyfill work? Join us as we talk through these questions and answer yours." www.youtube.com/watch?v=76hI...
CSS Anchor Positioning in Practice - Winging It Live
Miriam Suzanne and James Stuckey Weber of OddBird talk about CSS Anchor Positioning
Thu, May 30 @ 1pm ET / 11am MT
What is Anchor Positioning? Why is it exciting? What can you use it for? How does…
www.youtube.com
October 17, 2025 at 6:30 PM
Today's lunch video is "#CSS Anchor Positioning in Practice" - "What is Anchor Positioning? Why is it exciting? What can you use it for? How does the polyfill work? Join us as we talk through these questions and answer yours." www.youtube.com/watch?v=76hI...
A threat model for accessibility on the web: "There is one basic, underlying threat to disabled users having a consistently accessible experience when using the web: The primary threat for accessibility on the web is neglect." #a11y alice.boxhall.au/articles/a-t...
A threat model for accessibility on the web - Alice
A explanation of the primary threat to accessibility on the web, and a call to action for the web standards community
alice.boxhall.au
October 17, 2025 at 5:05 PM
A threat model for accessibility on the web: "There is one basic, underlying threat to disabled users having a consistently accessible experience when using the web: The primary threat for accessibility on the web is neglect." #a11y alice.boxhall.au/articles/a-t...
Conditional Border Radius with Modern #CSS: "A simple trick to control the border-radius based on the screen/container size." css-tip.com/conditional-...
Conditional Border Radius with Modern CSS
A simple trick to control the border-radius based on the screen/container size
css-tip.com
October 16, 2025 at 5:05 PM
Conditional Border Radius with Modern #CSS: "A simple trick to control the border-radius based on the screen/container size." css-tip.com/conditional-...
Numbers That Fall (Scroll-Driven Animations & Sibling Index): "With view() style scroll-driven animations, it's helpful to think about how you want it to work then tweak the ranges toward that goal." #CSS frontendmasters.com/blog/numbers...
Numbers That Fall (Scroll-Driven Animations & Sibling Index)
With view() style scroll-driven animations, it's helpful to think about how you want it to work then tweak the ranges toward that goal.
frontendmasters.com
October 15, 2025 at 5:04 PM
Numbers That Fall (Scroll-Driven Animations & Sibling Index): "With view() style scroll-driven animations, it's helpful to think about how you want it to work then tweak the ranges toward that goal." #CSS frontendmasters.com/blog/numbers...