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
How to @scope #CSS Now That It’s Baseline: "We have some new and exciting ways of writing and organizing CSS, so today I’ll demonstrate the different ways of using @scope and the benefits of each one." frontendmasters.com/blog/how-to-...
How to @scope CSS Now That It’s Baseline
There is a way to declare a scope on a specific selector, a specific selector *down to* another selector, or with no
frontendmasters.com
January 13, 2026 at 6:04 PM
How to @scope #CSS Now That It’s Baseline: "We have some new and exciting ways of writing and organizing CSS, so today I’ll demonstrate the different ways of using @scope and the benefits of each one." frontendmasters.com/blog/how-to-...
4 #CSS Features Every Front-End Developer Should Know In 2026: "Toolbelt worthy, powerful, and game-changing CSS you need for 2026." nerdy.dev/4-css-featur...
4 CSS Features Every Front-End Developer Should Know In 2026 · January 7, 2026
Toolbelt worthy, powerful, and game-changing CSS you need for 2026.
nerdy.dev
January 12, 2026 at 6:01 PM
4 #CSS Features Every Front-End Developer Should Know In 2026: "Toolbelt worthy, powerful, and game-changing CSS you need for 2026." nerdy.dev/4-css-featur...
Today's lunch video is "11 New #CSS Features Every Browser Supports in 2025" - "You can use them safely across all major browsers. We’ll speed up render time, replace fiddly JS with cleaner CSS/HTML solutions, and peek into CSS Houdini for custom magic." www.youtube.com/watch?v=55uU...
11 New CSS Features Every Browser Supports in 2025
Sponsored by Sevalla (paid promotion) — Check it out here: https://sevalla.com/?utm_source=camelcase&utm_medium=Referral&utm_campaign=youtube
Check out my new video on GitHub Spark:…
www.youtube.com
January 9, 2026 at 7:30 PM
Today's lunch video is "11 New #CSS Features Every Browser Supports in 2025" - "You can use them safely across all major browsers. We’ll speed up render time, replace fiddly JS with cleaner CSS/HTML solutions, and peek into CSS Houdini for custom magic." www.youtube.com/watch?v=55uU...
You Can't Opt-Out of Accessibility: "A rant of frustration about accessibility being a undervalued yet critically important part of building digital experiences. Complaining about the industry's apathy and the true human cost of neglecting accessibility." #a11y vale.rocks/posts/access...
You Can't Opt-Out of Accessibility
Shiny exclusion all the way down.
vale.rocks
January 9, 2026 at 6:02 PM
You Can't Opt-Out of Accessibility: "A rant of frustration about accessibility being a undervalued yet critically important part of building digital experiences. Complaining about the industry's apathy and the true human cost of neglecting accessibility." #a11y vale.rocks/posts/access...
Your job is to deliver code you have proven to work: "Almost anyone can prompt an LLM to generate a thousand-line patch and submit it for code review. That’s no longer valuable. What’s valuable is contributing code that is proven to work." simonwillison.net/2025/Dec/18/...
Your job is to deliver code you have proven to work
In all of the debates about the value of AI-assistance in software development there’s one depressing anecdote that I keep on seeing: the junior engineer, empowered by some class of …
simonwillison.net
January 8, 2026 at 6:05 PM
Your job is to deliver code you have proven to work: "Almost anyone can prompt an LLM to generate a thousand-line patch and submit it for code review. That’s no longer valuable. What’s valuable is contributing code that is proven to work." simonwillison.net/2025/Dec/18/...
Responsive List of Avatars Using Modern #CSS: "A list of rounded images that slightly overlap each other is not complex, but the new thing is the responsive part that dynamically adjusts the overlap between the images so they fit inside the container." css-tricks.com/responsive-l...
Responsive List of Avatars Using Modern CSS (Part 1) | CSS-Tricks
A list of rounded images that slightly overlap each other is a classic web design pattern. The main idea is not complex, but the new thing is the responsive part. that dynamically adjusts the overlap…
css-tricks.com
January 7, 2026 at 6:02 PM
Responsive List of Avatars Using Modern #CSS: "A list of rounded images that slightly overlap each other is not complex, but the new thing is the responsive part that dynamically adjusts the overlap between the images so they fit inside the container." css-tricks.com/responsive-l...
Directional #CSS with scroll-state(scrolled): "Style based on scroll direction with this new scroll-state query feature." una.im/scroll-state...
una.im | Directional CSS with scroll-state(scrolled)
Style based on scroll direction with this new scroll-state query feature.
una.im
January 6, 2026 at 6:03 PM
Directional #CSS with scroll-state(scrolled): "Style based on scroll direction with this new scroll-state query feature." una.im/scroll-state...
Friday Front-End’s Top Links of 2025: "In 2025, we shared a curated list of five articles and one video every week. Here are the links that were most popular." spaceninja.com/blog/2025/ff...
Friday Front-End’s Top Links of 2025
In 2025, Friday Front-End shared a curated list of five articles and one video every week. Here are the links that were most popular.
spaceninja.com
January 5, 2026 at 6:01 PM
Friday Front-End’s Top Links of 2025: "In 2025, we shared a curated list of five articles and one video every week. Here are the links that were most popular." spaceninja.com/blog/2025/ff...
🎉 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...