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
The End of Friday Front-End: After over ten years of sharing front-end links every week, the time has come for me to shut down Friday Front-End. Thanks for subscribing! spaceninja.com/blog/2026/th...
The End of Friday Front-End
After over ten years of sharing front-end links every week, the time has come for me to shut down Friday Front-End. Thanks for subscribing!
spaceninja.com
May 1, 2026 at 5:04 PM
The End of Friday Front-End: After over ten years of sharing front-end links every week, the time has come for me to shut down Friday Front-End. Thanks for subscribing! spaceninja.com/blog/2026/th...
Today's lunch video is "Dos & Don’ts of Anchor Positioning" - "New resources to make #CSS Anchor Positioning easier, and some demos to help you understand how anchor positioning works. We'll also look at what new capabilities are in the pipeline." www.youtube.com/watch?v=OEvV...
Dos & Don’ts of Anchor Positioning
CSS Anchor Positioning isn't baseline yet, and there's good reason for that. You can use it, but it comes with some caveats. On April 16 James, Stacy, and Miriam will cover new resources to make…
www.youtube.com
May 1, 2026 at 4:06 PM
Today's lunch video is "Dos & Don’ts of Anchor Positioning" - "New resources to make #CSS Anchor Positioning easier, and some demos to help you understand how anchor positioning works. We'll also look at what new capabilities are in the pipeline." www.youtube.com/watch?v=OEvV...
9 Accessibility Myths and Pushbacks (And How to Answer Them): "Raising #a11y in meetings and getting pushback? You're not failing, you're just having the wrong conversations. This guide covers 9 common objections, to make the business case for accessibility." stephaniewalter.design/blog/9-acces...
9 Accessibility Myths and Pushbacks (And How to Answer Them) - UX Researcher & Designer.
Raising accessibility in meetings and getting pushback? You're not failing, you're just having the wrong conversations. This guide covers 9 common objections designers face, with data, reframes, and…
stephaniewalter.design
April 30, 2026 at 5:03 PM
9 Accessibility Myths and Pushbacks (And How to Answer Them): "Raising #a11y in meetings and getting pushback? You're not failing, you're just having the wrong conversations. This guide covers 9 common objections, to make the business case for accessibility." stephaniewalter.design/blog/9-acces...
Trimming our #CSS with sibling-index() and sibling-count(): "Small changes like this add up. Replacing repetitive selectors with functions like sibling-index() and sibling-count() makes the code easier to read and maintain, and a little more resilient to change." thoughtbot.com/blog/trimmin...
Trimming our CSS with sibling-index() and sibling-count()
We’re experimenting with two new CSS functions to clean up our logo marquee code.
thoughtbot.com
April 29, 2026 at 5:05 PM
Trimming our #CSS with sibling-index() and sibling-count(): "Small changes like this add up. Replacing repetitive selectors with functions like sibling-index() and sibling-count() makes the code easier to read and maintain, and a little more resilient to change." thoughtbot.com/blog/trimmin...
A Modern Quality Pipeline and Testing Strategy for Frontend Projects: "An agent writes most of my frontend code now. You used to write tests and types so the next person on the file stayed sane. Now you write them so the agent can check its own work." alexop.dev/posts/modern...
A Modern Quality Pipeline and Testing Strategy for Frontend Projects | alexop.dev
A short, framework-agnostic concept of what a modern quality pipeline and testing strategy look like for any JavaScript or TypeScript frontend project.
alexop.dev
April 28, 2026 at 5:03 PM
A Modern Quality Pipeline and Testing Strategy for Frontend Projects: "An agent writes most of my frontend code now. You used to write tests and types so the next person on the file stayed sane. Now you write them so the agent can check its own work." alexop.dev/posts/modern...
The End of Responsive Images: "Mat Marquis has waited 14 years to write this article. The sizes attribute has been a necessary evil but now, with an auto value capability, it’s completely transformed authoring responsive images on the web." #HTML piccalil.li/blog/the-end...
The end of responsive images
Mat Marquis has waited 14 years to write this article. The sizes attribute has been a necessary evil but now, with an auto value capability, it’s completely transformed authoring responsive images on…
piccalil.li
April 27, 2026 at 5:02 PM
The End of Responsive Images: "Mat Marquis has waited 14 years to write this article. The sizes attribute has been a necessary evil but now, with an auto value capability, it’s completely transformed authoring responsive images on the web." #HTML piccalil.li/blog/the-end...
Today's lunch video is "It’s 10PM: Do You Know Where Your #JavaScript Is?" - "We’ll talk about best practices to reduce or increase the JS on your web site to a sweet spot. It’s common to have too much JS, but can you go too far? Is zero JS a worthwhile goal?" www.zachleat.com/web/its-10pm/
Zach Leatherman—zachleat.com
A post by Zach Leatherman (zachleat)
zachleat.com
April 24, 2026 at 6:30 PM
Today's lunch video is "It’s 10PM: Do You Know Where Your #JavaScript Is?" - "We’ll talk about best practices to reduce or increase the JS on your web site to a sweet spot. It’s common to have too much JS, but can you go too far? Is zero JS a worthwhile goal?" www.zachleat.com/web/its-10pm/
box-shadow is no alternative to outline: "Using box-shadow for focus outlines is problematic in forced colors mode because the box-shadow property computes to none, which means that there are no shadows and consequently no focus styles in this mode." #a11y matuzo.at/blog/2026/bo...
box-shadow is no alternative to outline - Manuel Matuzovic
I'm a frontend developer in Graz, specialized in HTML, accessibility, and CSS layout and architecture.
matuzo.at
April 24, 2026 at 5:03 PM
box-shadow is no alternative to outline: "Using box-shadow for focus outlines is problematic in forced colors mode because the box-shadow property computes to none, which means that there are no shadows and consequently no focus styles in this mode." #a11y matuzo.at/blog/2026/bo...
WCAG3 Contrast as of April 2026: "APCA is no longer part of WCAG3. You can still use it, but for conformance (legal, policy, etc.) reasons you will still need to follow WCAG2. It’s possible to satisfy both in most cases." #a11y adrianroselli.com/2026/04/wcag...
WCAG3 Contrast as of April 2026
I am not speaking on behalf of the W3C nor the W3C Accessibility Guidelines Working Group (AGWG), nor am I a member, nor does anyone who is member know I am writing this, nor do I have any insider…
adrianroselli.com
April 23, 2026 at 5:02 PM
WCAG3 Contrast as of April 2026: "APCA is no longer part of WCAG3. You can still use it, but for conformance (legal, policy, etc.) reasons you will still need to follow WCAG2. It’s possible to satisfy both in most cases." #a11y adrianroselli.com/2026/04/wcag...
Warning: containment breach in cascade layer! "I believe !important should never be used but it’s not always my choice. The WordPress ecosystem is the ultimate specificity war. Cascade layers can curtail unruly plugins but if they use !important it’s game over." #CSS dbushell.com/2026/04/15/c...
Warning: containment breach in cascade layer!
The one where I get very confused
dbushell.com
April 22, 2026 at 5:03 PM
Warning: containment breach in cascade layer! "I believe !important should never be used but it’s not always my choice. The WordPress ecosystem is the ultimate specificity war. Cascade layers can curtail unruly plugins but if they use !important it’s game over." #CSS dbushell.com/2026/04/15/c...
Container Query Typography Systems: "With the adoption of #CSS container queries in all browsers, it's time to use them to fix typography systems." mattwaler.com/blog/contain...
Container Query Typography Systems
With the adoption of container queries in all browsers, it's time to use them to fix typography systems.
mattwaler.com
April 21, 2026 at 5:01 PM
Container Query Typography Systems: "With the adoption of #CSS container queries in all browsers, it's time to use them to fix typography systems." mattwaler.com/blog/contain...
Squash and Stretch: "Have you ever heard of Disney’s 12 Basic Principles of Animation? We’ll explore how we can use the first principle to create micro-interactions that feel more natural and believable. It’s one of those small things that has a big impact." #CSS www.joshwcomeau.com/animation/sq...
Squash and Stretch • Josh W. Comeau
Have you ever heard of Disney’s 12 Basic Principles of Animation? In this tutorial, we’ll explore how we can use the very first principle to create SVG micro-interactions that feel way more natural…
www.joshwcomeau.com
April 20, 2026 at 5:04 PM
Squash and Stretch: "Have you ever heard of Disney’s 12 Basic Principles of Animation? We’ll explore how we can use the first principle to create micro-interactions that feel more natural and believable. It’s one of those small things that has a big impact." #CSS www.joshwcomeau.com/animation/sq...
Today's lunch video is "5 #CSS fouls that I see way too often" - Learn about avoiding useless declarations and overly prescriptive height settings. The video also covers refactoring, focus styles, and choosing between Flexbox and Grid. www.youtube.com/watch?v=J_cn...
5 CSS fouls that I see way too often
👉 CSS Demystified: https://thecascade.dev/courses/css-demystified/
🔗 Links
✅ The Bramus article on viewport units that I mentioned:…
www.youtube.com
April 17, 2026 at 6:30 PM
Today's lunch video is "5 #CSS fouls that I see way too often" - Learn about avoiding useless declarations and overly prescriptive height settings. The video also covers refactoring, focus styles, and choosing between Flexbox and Grid. www.youtube.com/watch?v=J_cn...
The Intl API: The best browser API you're not using: "You have a type of data, and you want to easily format it in natural language. Whether you're formatting dates, numbers, currencies, lists, plurals, words, or sorted strings, the API shape stays similar." #JavaScript polypane.app/blog/the-int...
The Intl API: The best browser API you're not using | Polypane
Chances are you've used Moment.js , date-fns , Luxon , or numeral.js at some point. Developers have relied on these libraries for years to format dates…
polypane.app
April 17, 2026 at 5:04 PM
The Intl API: The best browser API you're not using: "You have a type of data, and you want to easily format it in natural language. Whether you're formatting dates, numbers, currencies, lists, plurals, words, or sorted strings, the API shape stays similar." #JavaScript polypane.app/blog/the-int...
Multi-stroke text effect in #CSS: "Browsers draw outlines of the character, and the larger you set the stroke width, the thicker the outline will get, while still maintaining its original shape. The next step is to use different colors and put them in order." yuanchuan.dev/multi-stroke...
Multi-stroke text effect in CSS
I used to see that retro multi-stroke text effect quite often and tried to replicate it using the CSS text-stroke property, but the results never quite matched. Because text-stroke accepts a single…
yuanchuan.dev
April 16, 2026 at 5:04 PM
Multi-stroke text effect in #CSS: "Browsers draw outlines of the character, and the larger you set the stroke width, the thicker the outline will get, while still maintaining its original shape. The next step is to use different colors and put them in order." yuanchuan.dev/multi-stroke...
SVG Filters Guide: Getting Started with the Basics: "While I firmly believe the best way to get started with #SVG filters is to just start using SVG filters, I’d also like to provide this starter’s guide, the stuff I wish I had read while getting into all this." frontendmasters.com/blog/svg-fil...
SVG Filters Guide: Getting Started with the Basics
Let's take a look at what SVG filters are and the basics of how they work.
frontendmasters.com
April 15, 2026 at 5:03 PM
SVG Filters Guide: Getting Started with the Basics: "While I firmly believe the best way to get started with #SVG filters is to just start using SVG filters, I’d also like to provide this starter’s guide, the stuff I wish I had read while getting into all this." frontendmasters.com/blog/svg-fil...
Inverted themes with light-dark() - "The goal was to make it so that when the browser switched from light/dark modes, themed elements would switch to their inverse theme. The trick I uncovered was setting the current theme as a #CSS variable." daverupert.com/2026/04/inve...
Inverted themes with light-dark()
We rolled out adaptive light-dark() support on our design system themes and it’s been a delightful upgrade. Creating light and dark variable sets isn’t difficult, but delivery has trade-offs. Most…
daverupert.com
April 14, 2026 at 5:02 PM
Inverted themes with light-dark() - "The goal was to make it so that when the browser switched from light/dark modes, themed elements would switch to their inverse theme. The trick I uncovered was setting the current theme as a #CSS variable." daverupert.com/2026/04/inve...
CSS or BS? "We show you a #CSS property name. You tell us if it's real or if we made it up. That's it. It starts easy. It does not stay easy. The CSS spec has over 600 properties. Some of them sound made up. Some of our fakes sound terrifyingly real. Good luck." www.keithcirkel.co.uk/css-or-bs/
CSS or BS?
Think you know CSS? Real property or made-up nonsense? 20 rounds. No mercy.
www.keithcirkel.co.uk
April 13, 2026 at 5:01 PM
CSS or BS? "We show you a #CSS property name. You tell us if it's real or if we made it up. That's it. It starts easy. It does not stay easy. The CSS spec has over 600 properties. Some of them sound made up. Some of our fakes sound terrifyingly real. Good luck." www.keithcirkel.co.uk/css-or-bs/
Today's lunch video is "Responsive Type Doesn’t Have To Be Complicated" - "You don’t need anything complicated to build a type scale for your site. With the right units, we can get excellent results from a few lines of code without relying on third party tools." #CSS www.youtube.com/watch?v=B-r6...
Responsive Type Doesn’t Have To Be Complicated
Miriam has spent a lot of time digging into the different approaches, the math involved, the user implications, and the ways modern CSS can help us out. There are equations and graphs! But you don’t…
www.youtube.com
April 10, 2026 at 6:30 PM
Today's lunch video is "Responsive Type Doesn’t Have To Be Complicated" - "You don’t need anything complicated to build a type scale for your site. With the right units, we can get excellent results from a few lines of code without relying on third party tools." #CSS www.youtube.com/watch?v=B-r6...
There’s no need to include ‘navigation’ in your navigation labels: "Marking up navigation is pretty straightforward, but here’s a nice reminder on how the aria-label should be written." #a11y www.tempertemper.net/blog/theres-...
There’s no need to include ‘navigation’ in your navigation labels
Marking up navigation is pretty straightforward, but here’s a nice reminder on how the aria-label should be written.
www.tempertemper.net
April 10, 2026 at 5:02 PM
There’s no need to include ‘navigation’ in your navigation labels: "Marking up navigation is pretty straightforward, but here’s a nice reminder on how the aria-label should be written." #a11y www.tempertemper.net/blog/theres-...
Making Complex #CSS Shapes Using shape() - "Creating more complex CSS shapes such as triangles, hexagons, stars, hearts, etc. is more challenging but still a simple task if we rely on modern features." css-tricks.com/complex-css-...
Making Complex CSS Shapes Using shape() | CSS-Tricks
Creating rectangles, circles, and rounded rectangles is the basic of CSS. Creating more complex CSS shapes such as triangles, hexagons, stars, hearts, etc. is more challenging but still a simple task…
css-tricks.com
April 9, 2026 at 5:03 PM
Making Complex #CSS Shapes Using shape() - "Creating more complex CSS shapes such as triangles, hexagons, stars, hearts, etc. is more challenging but still a simple task if we rely on modern features." css-tricks.com/complex-css-...
Sorry for the extra post, but my newsletter provider, Curated, seems to be falling apart and I'm considering switching. Anyone have recommendations for link-based newsletters?
April 8, 2026 at 5:35 PM
Sorry for the extra post, but my newsletter provider, Curated, seems to be falling apart and I'm considering switching. Anyone have recommendations for link-based newsletters?
What Is #CSS Containment and How Can I Use It? "CSS containment lets you isolate layout and paint work to self-contained ‘islands’. Here’s what each contain value does and how to use it safely." csswizardry.com/2026/04/what...
What Is CSS Containment and How Can I Use It? – CSS Wizardry
CSS containment lets you isolate layout and paint work to self-contained ‘islands’. Here’s what each contain value does and how to use it safely.
csswizardry.com
April 8, 2026 at 5:02 PM
What Is #CSS Containment and How Can I Use It? "CSS containment lets you isolate layout and paint work to self-contained ‘islands’. Here’s what each contain value does and how to use it safely." csswizardry.com/2026/04/what...
"#CSS subgrid is perfect for CMS content that is a giant blob of HTML. We centre the content wrapper for top-level prose to look presentable, then we break out complex patterns and use subgrid to align their contents back inside. It only takes a single class to start!" dbushell.com/2026/04/02/c...
CSS subgrid is super good
The one where I code a simple but powerful grid layout
dbushell.com
April 7, 2026 at 5:03 PM
"#CSS subgrid is perfect for CMS content that is a giant blob of HTML. We centre the content wrapper for top-level prose to look presentable, then we break out complex patterns and use subgrid to align their contents back inside. It only takes a single class to start!" dbushell.com/2026/04/02/c...
CSS is DOOMed! "I built DOOM in CSS. Every wall, floor, barrel, and imp is a 
, positioned in 3D space using CSS transforms. The game logic runs in JavaScript, but the rendering is entirely #CSS. You can play it right now." nielsleenheer.com/articles/202...
CSS is DOOMed!
Every wall, floor, barrel, and imp is a div — DOOM rendered entirely in CSS. Using 3D transforms, CSS math functions, @property, clip-path, anchor positioning, and SVG filters to build a fully…
nielsleenheer.com
April 6, 2026 at 5:01 PM
CSS is DOOMed! "I built DOOM in CSS. Every wall, floor, barrel, and imp is a
, positioned in 3D space using CSS transforms. The game logic runs in JavaScript, but the rendering is entirely #CSS. You can play it right now." nielsleenheer.com/articles/202...
Sign in to LightNews
or
Don't have an account?
English
300
Connect Bluesky
Enter your Bluesky handle and app password to unlock posting, likes, and your Following feed.
Need an app password? Open Bluesky, go to Settings > App passwords, and create a new one.
Connect with Bluesky
Sign in with your Bluesky account to unlock posting, likes, and your Following feed.