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
#CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions: "Prescriptive class name conventions are no longer enough to keep CSS maintainable. Can the new @scope rule give devs the confidence to write CSS that keeps up with modern front ends?" www.smashingmagazine.com/2026/02/css-...
CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions — Smashing Magazine
Prescriptive class name conventions are no longer enough to keep CSS maintainable in a world of increasingly complex interfaces. Can the new `@scope` rule finally give developers the confidence to…
www.smashingmagazine.com
February 11, 2026 at 6:04 PM
#CSS @scope: An Alternative To Naming Conventions And Heavy Abstractions: "Prescriptive class name conventions are no longer enough to keep CSS maintainable. Can the new @scope rule give devs the confidence to write CSS that keeps up with modern front ends?" www.smashingmagazine.com/2026/02/css-...
Typographic scales and technical pens: "A flexible system for consistent stroke widths across type sizes. I want my site to look like it was drawn with two technical pens, a standard one with a thinner stroke and a more emphatic one with a thicker stroke." #CSS v7.robweychert.com/blog/2026/01...
V7: Typographic scales and technical pens
A flexible system for consistent stroke widths across type sizes
v7.robweychert.com
February 10, 2026 at 6:03 PM
Typographic scales and technical pens: "A flexible system for consistent stroke widths across type sizes. I want my site to look like it was drawn with two technical pens, a standard one with a thinner stroke and a more emphatic one with a thicker stroke." #CSS v7.robweychert.com/blog/2026/01...
Getting Your Article Shared: Tips from Ten Years of Newsletter Curation: "Some tips to make it easier to get your article shared in newsletters and social media, such as OG tags, a good sharing image, and some gotchas to watch out for." cloudfour.com/thinks/getti...
Getting Your Article Shared: Tips from Ten Years of Newsletter Curation
Some tips to make it easier to get your article shared in newsletters and social media, such as OG tags, a good sharing image, and some gotchas to watch out for.
cloudfour.com
February 9, 2026 at 6:01 PM
Getting Your Article Shared: Tips from Ten Years of Newsletter Curation: "Some tips to make it easier to get your article shared in newsletters and social media, such as OG tags, a good sharing image, and some gotchas to watch out for." cloudfour.com/thinks/getti...
Styling new #HTML UI capabilities: "This presentation is a love letter to new UI capabilities, and #CSS, showing you how to combine features such as anchoring, transitioning, scroll snapping, and more to create fun, progressively enhanced, customized select elements." www.youtube.com/watch?v=SsBC...
Styling new HTML UI capabilities - Brecht De Ruyte - CSS Day 2025
We are getting spoiled with increased UI capabilities, partially thanks to the efforts from the W3C community group Open UI. One of those features is the customizable select. This new capability for…
www.youtube.com
February 6, 2026 at 7:30 PM
Styling new #HTML UI capabilities: "This presentation is a love letter to new UI capabilities, and #CSS, showing you how to combine features such as anchoring, transitioning, scroll snapping, and more to create fun, progressively enhanced, customized select elements." www.youtube.com/watch?v=SsBC...
Anchor Interpolated Morph (AIM): "Go forth and make more natural transitions that feel spatially contextual. Stop letting your elements 'teleport' into view, start letting them grow, stretch, and evolve directly from the components that triggered them." #CSS nerdy.dev/anchor-inter...
Anchor Interpolated Morph (AIM) · January 23, 2026
Morphing overlay elements from dynamic places
nerdy.dev
February 6, 2026 at 6:04 PM
Anchor Interpolated Morph (AIM): "Go forth and make more natural transitions that feel spatially contextual. Stop letting your elements 'teleport' into view, start letting them grow, stretch, and evolve directly from the components that triggered them." #CSS nerdy.dev/anchor-inter...
There is No Need to Trap Focus on a Dialog Element: "Accessibility advice around modals have commonly taught us to trap focus within the modal. Upon further research, it seems like we no longer need to trap focus within the
There is No Need to Trap Focus on a Dialog Element | CSS-Tricks
Accessibility advice around modals have commonly taught us to trap focus within the modal. Upon further research, it seems like we no longer need to trap focus within the <dialog> (even in modal…
css-tricks.com
February 5, 2026 at 6:05 PM
There is No Need to Trap Focus on a Dialog Element: "Accessibility advice around modals have commonly taught us to trap focus within the modal. Upon further research, it seems like we no longer need to trap focus within the
Solving Shrinkwrap: New Experimental Technique: "By using anchor positioning and scroll-driven animations, we can adjust our element’s outer dimensions by measuring its inner contents… For many cases this can already work and might unlock a future native feature." #CSS kizu.dev/shrinkwrap-s...
Solving Shrinkwrap: New Experimental Technique
In this article, I present my new technique for solving a CSS problem that was deemed impossible — true shrinkwrapping of an element with auto-wrapped content. By using anchor positioning and…
kizu.dev
February 4, 2026 at 6:03 PM
Solving Shrinkwrap: New Experimental Technique: "By using anchor positioning and scroll-driven animations, we can adjust our element’s outer dimensions by measuring its inner contents… For many cases this can already work and might unlock a future native feature." #CSS kizu.dev/shrinkwrap-s...
Drawing Connections with #CSS Anchor Positioning: "Every now and then, CSS gets a new feature that makes you pause and go: wait… we can do that now? The idea is deceptively simple: let one element position itself relative to another, without JS or wrapper elements." rolandfranke.nl/frontend-sto...
Drawing Connections with CSS Anchor Positioning - Roland Franke
A practical exploration of CSS Anchor Positioning and the anchor() function to visually connect related elements without extra markup.
rolandfranke.nl
February 3, 2026 at 6:03 PM
Drawing Connections with #CSS Anchor Positioning: "Every now and then, CSS gets a new feature that makes you pause and go: wait… we can do that now? The idea is deceptively simple: let one element position itself relative to another, without JS or wrapper elements." rolandfranke.nl/frontend-sto...
When will #CSS Grid Lanes arrive? How long until we can use it? "Anytime an exciting new web technology starts to land in browsers, developers want to know 'when in the world am I going to be able to use this?'" webkit.org/blog/17758/w...
When will CSS Grid Lanes arrive? How long until we can use it?
Anytime an exciting new web technology starts to land in browsers, developers want to know “when in the world am I going to be able to use this?” Currently, the finalized syntax for Grid Lanes is…
webkit.org
February 2, 2026 at 6:00 PM
When will #CSS Grid Lanes arrive? How long until we can use it? "Anytime an exciting new web technology starts to land in browsers, developers want to know 'when in the world am I going to be able to use this?'" webkit.org/blog/17758/w...
Today's lunch video is "CSS Came For My Job" - "A practical guide to view transitions for creative devs. I’ll share what I learned switching from JS animations to #CSS. I’ll talk about what works, what doesn’t (yet), and how these tools are reshaping the workflow." www.youtube.com/watch?v=rPXS...
CSS tried to come for my Job - Cyd Stumpel - CSS Day 2025
CSS has gotten more powerful in terms of layout for the last couple of years, but lately, it’s also been creeping into places that have traditionally relied heavily on Javascript.
Features like…
www.youtube.com
January 30, 2026 at 7:30 PM
Today's lunch video is "CSS Came For My Job" - "A practical guide to view transitions for creative devs. I’ll share what I learned switching from JS animations to #CSS. I’ll talk about what works, what doesn’t (yet), and how these tools are reshaping the workflow." www.youtube.com/watch?v=rPXS...
The 2025 Web Almanac: "The Web Almanac is an annual state of the web report combining the expertise of the web community with the data and trends of the HTTP Archive." almanac.httparchive.org/en/2025/
The 2025 Web Almanac
The Web Almanac is an annual state of the web report combining the expertise of the web community with the data and trends of the HTTP Archive.
almanac.httparchive.org
January 30, 2026 at 6:01 PM
The 2025 Web Almanac: "The Web Almanac is an annual state of the web report combining the expertise of the web community with the data and trends of the HTTP Archive." almanac.httparchive.org/en/2025/
View Transitions & Playing Video: "Can you keep a video playing as a #CSS view transition happens? Yes and no. Mostly yes." frontendmasters.com/blog/view-tr...
View Transitions & Playing Video
Can you keep a video playing as a view transitions happens? Yes and no. Mostly yes.
frontendmasters.com
January 29, 2026 at 6:02 PM
View Transitions & Playing Video: "Can you keep a video playing as a #CSS view transition happens? Yes and no. Mostly yes." frontendmasters.com/blog/view-tr...
Faking a Fieldset-Legend: "Let’s mimic the look of a
Faking a Fieldset-Legend
Using CSS to make a heading overlay and clip the border of its own container.
cloudfour.com
January 28, 2026 at 6:04 PM
Faking a Fieldset-Legend: "Let’s mimic the look of a
The Incredible Overcomplexity of the Shadcn Radio Button: "Why are we using a UI library that wraps another UI library that rebuilds radio buttons from scratch? Why does it require so much #JavaScript? How did we make a built-in browser control so complicated?" paulmakeswebsites.com/writing/shad...
The Incredible Overcomplexity of the Shadcn Radio Button
Radio buttons are built into web browsers. Why are we using a UI library that wraps another UI library that rebuilds radio buttons from scratch? Why does rendering a radio button require multiple…
paulmakeswebsites.com
January 27, 2026 at 6:01 PM
The Incredible Overcomplexity of the Shadcn Radio Button: "Why are we using a UI library that wraps another UI library that rebuilds radio buttons from scratch? Why does it require so much #JavaScript? How did we make a built-in browser control so complicated?" paulmakeswebsites.com/writing/shad...
#CSS in 2026: The new features reshaping frontend development: "Jemima Abu, a senior product engineer and award-winning developer educator, shows how she replaced 150+ lines of JavaScript with just a few new CSS features." blog.logrocket.com/css-in-2026/
CSS in 2026: The new features reshaping frontend development - LogRocket Blog
Jemima Abu, a senior product engineer and award-winning developer educator, shows how she replaced 150+ lines of JavaScript with just a few new CSS features.
blog.logrocket.com
January 26, 2026 at 6:02 PM
#CSS in 2026: The new features reshaping frontend development: "Jemima Abu, a senior product engineer and award-winning developer educator, shows how she replaced 150+ lines of JavaScript with just a few new CSS features." blog.logrocket.com/css-in-2026/
Today's lunch video is "Practical Use-Cases for `overflow: clip`" - "A brief guide outlining the difference between `overflow: hidden` and `overflow: clip`, along with practical use cases when you’ll find `overflow: clip` life-saving." #CSS www.youtube.com/watch?v=epLo...
Practical Use-Cases for “overflow: clip;”
A brief guide outlining the difference between "overflow: hidden" and "overflow: clip", along with practical use cases when you’ll find "overflow: clip" life-saving.
🎨 Demo:…
www.youtube.com
January 23, 2026 at 7:30 PM
Today's lunch video is "Practical Use-Cases for `overflow: clip`" - "A brief guide outlining the difference between `overflow: hidden` and `overflow: clip`, along with practical use cases when you’ll find `overflow: clip` life-saving." #CSS www.youtube.com/watch?v=epLo...
Dark Mode: Essential not a Preference: "For blind and low-vision users dark mode is not just a preference—it is a necessity. It reduces glare, enhances contrast, and extends the time users can comfortably engage with digital content." #a11y seemeplease.com/blog/dark-mode
Dark Mode - Essential not a Preference – See Me Please
Dark mode is often treated as a nice-to-have rather than a necessity or assistive technology.
seemeplease.com
January 23, 2026 at 6:02 PM
Dark Mode: Essential not a Preference: "For blind and low-vision users dark mode is not just a preference—it is a necessity. It reduces glare, enhances contrast, and extends the time users can comfortably engage with digital content." #a11y seemeplease.com/blog/dark-mode
Popover Context Menus with Anchor Positioning: "A context menu is like a tooltip in that it opens right next to the the thing that opened it. Here, we animate the opening and ensure it opens somewhere where it doesn't get cut off." #CSS frontendmasters.com/blog/popover...
Popover Context Menus with Anchor Positioning
A context menu is like a tooltip in that it opens right next to the the thing that opened it. Here, we animate the opening and ensure it opens somewhere where it doesn't get cut off.
frontendmasters.com
January 22, 2026 at 6:03 PM
Popover Context Menus with Anchor Positioning: "A context menu is like a tooltip in that it opens right next to the the thing that opened it. Here, we animate the opening and ensure it opens somewhere where it doesn't get cut off." #CSS frontendmasters.com/blog/popover...
Accessible faux-nested interactive controls: "A common pattern is a big clickable area like a card. Sometimes you need controls in that card that are also clickable. There's lots of ways to do it wrong, but fret not, Eric is here to show you how to do it right." #a11y piccalil.li/blog/accessi...
Accessible faux-nested interactive controls
A really common user interface pattern is a big clickable area, such as a card. Sometimes you need controls within that card that are also clickable. There's lots of ways to do it wrong, but fret…
piccalil.li
January 21, 2026 at 6:02 PM
Accessible faux-nested interactive controls: "A common pattern is a big clickable area like a card. Sometimes you need controls in that card that are also clickable. There's lots of ways to do it wrong, but fret not, Eric is here to show you how to do it right." #a11y piccalil.li/blog/accessi...
Death to Scroll Fade! "We’re all devs here. Can we collectively pretend scroll fade is technically impossible now? Or like, say they made it illegal because nonagenarians don’t have time for such nonsense?" #a11y dbushell.com/2026/01/09/d...
Death to Scroll Fade!
The one where I crowdsource an argument winner
dbushell.com
January 20, 2026 at 6:02 PM
Death to Scroll Fade! "We’re all devs here. Can we collectively pretend scroll fade is technically impossible now? Or like, say they made it illegal because nonagenarians don’t have time for such nonsense?" #a11y dbushell.com/2026/01/09/d...
Theming Animations Using #CSS Relative Colour: "CSS relative colour values are now widely supported. In this article, pioneering author and web designer Andy Clarke shares practical techniques for using them to theme and animate SVG graphics." www.smashingmagazine.com/2026/01/smas...
Smashing Animations Part 8: Theming Animations Using CSS Relative Colour — Smashing Magazine
CSS relative colour values are now widely supported. In this article, pioneering author and web designer [Andy Clarke](https://stuffandnonsense.co.uk/) shares practical techniques for using them to…
www.smashingmagazine.com
January 19, 2026 at 6:02 PM
Theming Animations Using #CSS Relative Colour: "CSS relative colour values are now widely supported. In this article, pioneering author and web designer Andy Clarke shares practical techniques for using them to theme and animate SVG graphics." www.smashingmagazine.com/2026/01/smas...
Why #CSS Grid Feels Complex, and How to Keep It Simple: "People like the single track flexbox approach versus grid where you're dealing with rows and columns and line numbers and everything else. But grid doesn't need to be complicated like that." www.youtube.com/watch?v=7Ort...
Why CSS Grid feels complex, and how to keep it simple
✉ Keep up to date with everything I'm up to https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS…
www.youtube.com
January 16, 2026 at 7:30 PM
Why #CSS Grid Feels Complex, and How to Keep It Simple: "People like the single track flexbox approach versus grid where you're dealing with rows and columns and line numbers and everything else. But grid doesn't need to be complicated like that." www.youtube.com/watch?v=7Ort...
5 Accessibility Checks to Run on Every Component: "Hidde de Vries explains how to test components for accessibility, from keyboard support to screen readers and zoom." #a11y zeroheight.com/blog/5-acces...
5 accessibility checks to run on every component - zeroheight
Hidde de Vries explains how to test components for accessibility, from keyboard support to screen readers and zoom.
zeroheight.com
January 16, 2026 at 6:03 PM
5 Accessibility Checks to Run on Every Component: "Hidde de Vries explains how to test components for accessibility, from keyboard support to screen readers and zoom." #a11y zeroheight.com/blog/5-acces...
Introducing #CSS Grid Lanes: "It’s here, the future of masonry layouts on the web! After the groundwork laid by Mozilla, years of effort by Apple’s WebKit team, and many rounds debate at the CSS Working Group with all the browsers, it’s now clear how it works." webkit.org/blog/17660/i...
Introducing CSS Grid Lanes
It’s here, the future of masonry layouts on the web!
webkit.org
January 15, 2026 at 6:02 PM
Introducing #CSS Grid Lanes: "It’s here, the future of masonry layouts on the web! After the groundwork laid by Mozilla, years of effort by Apple’s WebKit team, and many rounds debate at the CSS Working Group with all the browsers, it’s now clear how it works." webkit.org/blog/17660/i...
Algorithmic Hover States with contrast-color(): "For those unfamiliar, `contrast-color()` is a new #CSS function that will take a `` as input and returns either `white` or `black` depending on which has the most contrast." daverupert.com/2026/01/algo...
Algorithmic hover states with contrast-color()
Firefox 146 added support for contrast-color() joining Safari 26 in the First Implementor’s Club. For those unfamiliar, contrast-color(<color>) is a new CSS function that will take a <color> as input…
daverupert.com
January 14, 2026 at 6:02 PM
Algorithmic Hover States with contrast-color(): "For those unfamiliar, `contrast-color()` is a new #CSS function that will take a `` as input and returns either `white` or `black` depending on which has the most contrast." daverupert.com/2026/01/algo...