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
🎉 Friday Front-End is going on break for the holidays. See you in the new year!
December 19, 2025 at 10:15 PM
🎉 Friday Front-End is going on break for the holidays. See you in the new year!
Today's lunch video is "3 powerful #CSS nesting tricks" - "CSS nesting is a nice developer experience improvement in general, but if we get a little more creative with how it works, we can do a little more to help organize our stylesheets than you might realize." www.youtube.com/watch?v=hiwv...
3 powerful CSS nesting tricks
CSS nesting is a nice developer experience improvement in general, but if we get a little more creative with how it works, we can do a little more to help organize our stylesheets than you might…
www.youtube.com
December 19, 2025 at 7:30 PM
Today's lunch video is "3 powerful #CSS nesting tricks" - "CSS nesting is a nice developer experience improvement in general, but if we get a little more creative with how it works, we can do a little more to help organize our stylesheets than you might realize." www.youtube.com/watch?v=hiwv...
Meeting WCAG is an achievement: "Our job is to enable clients and their teams to make the most out of the circumstances at hand. That sometimes means to prioritize or fixes over others because they are more achievable. This does not devalue your work." #a11y yatil.net/blog/meeting...
Meeting WCAG is an achievement · Eric Eggert
A notion that I always hear and have heard for a long time is that meeting the Web Content Accessibility Guidelines (WCAG) feels like not …
yatil.net
December 19, 2025 at 6:01 PM
Meeting WCAG is an achievement: "Our job is to enable clients and their teams to make the most out of the circumstances at hand. That sometimes means to prioritize or fixes over others because they are more achievable. This does not devalue your work." #a11y yatil.net/blog/meeting...
Thoughts on Native #CSS Mixins: "There are no browser implementations of mixins yet, nor a fleshed out spec. So perhaps now is the best time to try to understand and opine." frontendmasters.com/blog/thought...
Thoughts on Native CSS Mixins
There are no browser implementations of mixins yet, nor a fleshed out spec. So perhaps now is the best time to try to understand and opine.
frontendmasters.com
December 18, 2025 at 6:04 PM
Thoughts on Native #CSS Mixins: "There are no browser implementations of mixins yet, nor a fleshed out spec. So perhaps now is the best time to try to understand and opine." frontendmasters.com/blog/thought...
Why are my #CSS view transitions blinking? "Miguel had been battling an annoying blinking with his view transitions and found the root cause. He’s sharing his learning in this article so you don’t fall into the same trap!" piccalil.li/blog/why-are...
Why are my view transitions blinking?
Miguel had been battling an annoying blinking with his view transitions and found the root cause. He’s sharing his learning in this article so you don’t fall into the same trap!
piccalil.li
December 17, 2025 at 6:01 PM
Why are my #CSS view transitions blinking? "Miguel had been battling an annoying blinking with his view transitions and found the root cause. He’s sharing his learning in this article so you don’t fall into the same trap!" piccalil.li/blog/why-are...
Scrollytelling on Steroids With #CSS Scroll-State Queries: "Unconvinced of the value of scrollytelling? Alright, skeptic, let’s first warm up with some common use cases for scroll-based styling." css-tricks.com/scrollytelli...
Scrollytelling on Steroids With Scroll-State Queries | CSS-Tricks
Unconvinced of the value of scrollytelling? Alright, skeptic, let’s first warm up with some common use cases for scroll-based styling.
css-tricks.com
December 16, 2025 at 6:03 PM
Scrollytelling on Steroids With #CSS Scroll-State Queries: "Unconvinced of the value of scrollytelling? Alright, skeptic, let’s first warm up with some common use cases for scroll-based styling." css-tricks.com/scrollytelli...
CSS Wrapped 2025: "This year, we're giving you new tools to sculpt a dynamic web. Sculpt dynamic interfaces, stretch your imagination, and play with these 22 powerful new #CSS features that landed in Chrome this year." chrome.dev/css-wrapped-...
CSS Wrapped 2025
Sculpt dynamic interfaces, stretch your imagination, and play with these 22 powerful new CSS features that landed in Chrome this year.
chrome.dev
December 15, 2025 at 6:02 PM
CSS Wrapped 2025: "This year, we're giving you new tools to sculpt a dynamic web. Sculpt dynamic interfaces, stretch your imagination, and play with these 22 powerful new #CSS features that landed in Chrome this year." chrome.dev/css-wrapped-...
Today's lunch video is "Getting started with #CSS Nesting" - "CSS Nesting is awesome, though there are a few important things to know about it, which I break down in this video." www.youtube.com/watch?v=h4Xp...
Getting started with CSS Nesting
CSS Nesting is awesome, though there are a few important things to know about it, which I break down in this video.
- Combinators video: https://youtu.be/rndMS4pEKP8
- Focus-visible:…
www.youtube.com
December 12, 2025 at 7:30 PM
Today's lunch video is "Getting started with #CSS Nesting" - "CSS Nesting is awesome, though there are a few important things to know about it, which I break down in this video." www.youtube.com/watch?v=h4Xp...
"Hard #CSS gradients" can be shortened to not include redundant values: "The CSS images specification includes fixup rules which can be helpful to remove redundant values from CSS gradient definitions." www.stefanjudis.com/today-i-lear...
"Hard CSS gradients" can be shortened to not include redundant values
The CSS images specification includes fixup rules which can be helpful to remove redundant values from CSS gradient definitions.
www.stefanjudis.com
December 12, 2025 at 6:04 PM
"Hard #CSS gradients" can be shortened to not include redundant values: "The CSS images specification includes fixup rules which can be helpful to remove redundant values from CSS gradient definitions." www.stefanjudis.com/today-i-lear...
Anchor Positioning and the Inset-Modified Containing Block: "If you kinda understand Anchor Positioning, but it still surprises you from time to time, then most likely this is the missing piece of information: the Inset-Modified Containing Block (or IMCB for short)." #CSS www.bram.us/2025/12/02/a...
Anchor Positioning and the Inset-Modified Containing Block (IMCB)
If you kinda understand Anchor Positioning, but it still surprises you from time to time, then most likely this is the missing piece of information: the Inset-Modified Containing Block (or IMCB for…
www.bram.us
December 11, 2025 at 6:02 PM
Anchor Positioning and the Inset-Modified Containing Block: "If you kinda understand Anchor Positioning, but it still surprises you from time to time, then most likely this is the missing piece of information: the Inset-Modified Containing Block (or IMCB for short)." #CSS www.bram.us/2025/12/02/a...
Masonry: Things You Won’t Need A Library For Anymore: "#CSS Masonry is almost here! Patrick Brosset takes a deep dive into what this long-awaited feature means for web developers and how you could make use of it in your own work." www.smashingmagazine.com/2025/12/maso...
Masonry: Things You Won’t Need A Library For Anymore — Smashing Magazine
CSS Masonry is almost here! Patrick Brosset takes a deep dive into what this long-awaited feature means for web developers and how you could make use of it in your own work.
www.smashingmagazine.com
December 10, 2025 at 6:02 PM
Masonry: Things You Won’t Need A Library For Anymore: "#CSS Masonry is almost here! Patrick Brosset takes a deep dive into what this long-awaited feature means for web developers and how you could make use of it in your own work." www.smashingmagazine.com/2025/12/maso...
The Google Antigravity website, rebuilt with Modern #CSS: "As an experiment to see if Modern CSS is up to the task, I recreated the Google Antigravity website with Modern CSS." www.bram.us/2025/12/02/g...
The Google Antigravity website, rebuilt with Modern CSS
As an experiment to see if Modern CSS is up to the task, I recreated the Google Antigravity website with Modern CSS.
www.bram.us
December 9, 2025 at 6:01 PM
The Google Antigravity website, rebuilt with Modern #CSS: "As an experiment to see if Modern CSS is up to the task, I recreated the Google Antigravity website with Modern CSS." www.bram.us/2025/12/02/g...
Using #CSS to fix the irradiation illusion: "How to adjust perceived font weight in dark mode without layout shift" nerdy.dev/adjust-perce...
Using CSS to fix the irradiation illusion · November 29, 2025
How to adjust perceived font weight in dark mode without layout shift
nerdy.dev
December 8, 2025 at 6:01 PM
Using #CSS to fix the irradiation illusion: "How to adjust perceived font weight in dark mode without layout shift" nerdy.dev/adjust-perce...
How To Create a Dark-Mode Adaptive #SVG Favicon: "Find out how to create an adaptive favicon that automatically switches to a light/dark color scheme using SVG icon format and prefers-color-scheme media query." #CSS www.youtube.com/watch?v=5ByM...
How To Create an Adaptive SVG Favicon Using the prefers-color-scheme Media Query
Find out how to create an adaptive favicon that automatically switches to a light/dark color scheme using SVG icon format and prefers-color-scheme media query.
Subscribe to my Newsletters
💌 CSS…
www.youtube.com
December 5, 2025 at 7:30 PM
How To Create a Dark-Mode Adaptive #SVG Favicon: "Find out how to create an adaptive favicon that automatically switches to a light/dark color scheme using SVG icon format and prefers-color-scheme media query." #CSS www.youtube.com/watch?v=5ByM...
Build Your Own Router: "URLPattern just dropped, so I wanted to dig into what it would take to make a simple SPA router with vanilla #JavaScript and browser APIs." jschof.dev/posts/2025/1...
Jschof.dev
I love to collaborate and solve problems. A front end dev blogging about html, css, javascript, web components... and more!
Jschof.dev
December 5, 2025 at 6:02 PM
Build Your Own Router: "URLPattern just dropped, so I wanted to dig into what it would take to make a simple SPA router with vanilla #JavaScript and browser APIs." jschof.dev/posts/2025/1...
Updating #CSS Border Radius When A Container Is Overflowing: "In this article we’ll create a container element that dynamically adjusts its `border-radius` when its contents overflows." pqina.nl/blog/update-...
Updating CSS Border Radius When A Container Is Overflowing
In this article we’ll create a container element that dynamically adjusts its border-radius when its contents overflows.
pqina.nl
December 4, 2025 at 6:04 PM
Updating #CSS Border Radius When A Container Is Overflowing: "In this article we’ll create a container element that dynamically adjusts its `border-radius` when its contents overflows." pqina.nl/blog/update-...
Keyframes Tokens: Standardizing Animation Across Projects: "By consolidating and standardizing keyframes, you take something that is usually messy and hard to manage and turn it into a clear, predictable system." #CSS www.smashingmagazine.com/2025/11/keyf...
Keyframes Tokens: Standardizing Animation Across Projects — Smashing Magazine
Animations can be one of the most joyful parts of building interfaces, but without structure, they can also become one of the biggest sources of frustration. By consolidating and standardizing…
www.smashingmagazine.com
December 3, 2025 at 6:02 PM
Keyframes Tokens: Standardizing Animation Across Projects: "By consolidating and standardizing keyframes, you take something that is usually messy and hard to manage and turn it into a clear, predictable system." #CSS www.smashingmagazine.com/2025/11/keyf...
Why use #React? "This isn’t a rhetorical question. I genuinely want to know why devs choose to build using React. There are many reasons. Alas, none of them relate directly to user experience, other than productive devs will make better websites. (Citation needed.)" adactio.com/journal/22265
Why use React?
Or, more precisely, why use React *in the browser*?
adactio.com
December 2, 2025 at 6:02 PM
Why use #React? "This isn’t a rhetorical question. I genuinely want to know why devs choose to build using React. There are many reasons. Alas, none of them relate directly to user experience, other than productive devs will make better websites. (Citation needed.)" adactio.com/journal/22265
Brand New Layouts with #CSS Subgrid: "Subgrid allows us to extend a grid template so deeply-nested elements can participate in the same layout. I thought this would be a helpful convenience, but it unlocks exciting new layout possibilities we couldn’t do until now." www.joshwcomeau.com/css/subgrid/
Brand New Layouts with CSS Subgrid • Josh W. Comeau
Subgrid allows us to extend a grid template down through the DOM tree, so that deeply-nested elements can participate in the same grid layout. At first glance, I thought this would be a helpful…
www.joshwcomeau.com
December 1, 2025 at 6:02 PM
Brand New Layouts with #CSS Subgrid: "Subgrid allows us to extend a grid template so deeply-nested elements can participate in the same layout. I thought this would be a helpful convenience, but it unlocks exciting new layout possibilities we couldn’t do until now." www.joshwcomeau.com/css/subgrid/
Cross-browser Anchor Positioning: "Anchor positioning is available in all browsers. Join James Stuckey Weber, Miriam Suzanne, and Eric Meyer as they talk about the emerging patterns, the rough edges, changes to the spec, and what the future holds." #CSS www.youtube.com/watch?v=qOXY...
Cross-browser Anchor Positioning
It's finally here! With the release of Firefox 145 today, anchor positioning is available in all browsers. It’s still behind a flag in Firefox, so it isn’t Baseline Newly available quite yet. Join…
www.youtube.com
November 28, 2025 at 7:30 PM
Cross-browser Anchor Positioning: "Anchor positioning is available in all browsers. Join James Stuckey Weber, Miriam Suzanne, and Eric Meyer as they talk about the emerging patterns, the rough edges, changes to the spec, and what the future holds." #CSS www.youtube.com/watch?v=qOXY...
Tooltip Components Should Not Exist: "A look at why tooltip components are often the wrong abstraction in design systems, leading to accessibility issues, misuse, and inconsistent user experiences." #a11y tkdodo.eu/blog/tooltip...
Tooltip Components Should Not Exist
A look at why tooltip components are often the wrong abstraction in design systems, leading to accessibility issues, misuse, and inconsistent user experiences.
tkdodo.eu
November 28, 2025 at 6:03 PM
Tooltip Components Should Not Exist: "A look at why tooltip components are often the wrong abstraction in design systems, leading to accessibility issues, misuse, and inconsistent user experiences." #a11y tkdodo.eu/blog/tooltip...
High-Performance Syntax Highlighting with #CSS Highlights API: "Learn how to implement blazing-fast code syntax highlighting using the CSS Custom Highlight API without creating DOM nodes for each token." pavi2410.com/blog/high-pe...
High-Performance Syntax Highlighting with CSS Highlights API
Learn how to implement blazing-fast code syntax highlighting using the CSS Custom Highlight API without creating DOM nodes for each token.
pavi2410.com
November 27, 2025 at 6:02 PM
High-Performance Syntax Highlighting with #CSS Highlights API: "Learn how to implement blazing-fast code syntax highlighting using the CSS Custom Highlight API without creating DOM nodes for each token." pavi2410.com/blog/high-pe...
Combining Scroll-Driven Animations with @starting-style: "How the cascade, the `animation-fill-mode`, and implicit keyframes make things a bit more complicated then you’d initially think…" #CSS www.bram.us/2025/11/06/c...
Combining Scroll-Driven Animations with @starting-style
How the cascade, the animation-fill-mode, and implicit keyframes make things a bit more complicated then you’d initially think …
www.bram.us
November 26, 2025 at 6:04 PM
Combining Scroll-Driven Animations with @starting-style: "How the cascade, the `animation-fill-mode`, and implicit keyframes make things a bit more complicated then you’d initially think…" #CSS www.bram.us/2025/11/06/c...
Building a multi stage timetable with modern #CSS using grid, subgrid, round(), and mod(): "I needed a version that supports multiple stages, adapts to the tallest session, and stays aligned across the entire timeline — all built in CSS." 9elements.com/blog/buildin...
Building a multi stage timetable with modern CSS using grid, subgrid, round(), and mod(). - 9elements
Combining finest craftsmanship with elegant design to ship innovative digital experiences.
9elements.com
November 25, 2025 at 6:02 PM
Building a multi stage timetable with modern #CSS using grid, subgrid, round(), and mod(): "I needed a version that supports multiple stages, adapts to the tallest session, and stays aligned across the entire timeline — all built in CSS." 9elements.com/blog/buildin...
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...