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
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…
youtube.com
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
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
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
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
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
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
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
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
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
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…
joshwcomeau.com
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:…
youtube.com
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
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
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
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
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.
keithcirkel.co.uk
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…
youtube.com
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.
tempertemper.net
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
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
"#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
CSS is DOOMed! "I built DOOM in CSS. Every wall, floor, barrel, and imp is a <div>, 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
Today's lunch video is "Level, Up your Scroll UX" - "Styling and managing scroll across touch, keyboard, mouse and more can be daunting. Learn when to use what, and a whole bunch of niche details about #CSS and scrolling." www.youtube.com/watch?v=vPb7...
Level, Up your Scroll UX - Adam Argyle - CSS Day 2025
Slide by slide, CSS feature by feature, we'll incrementally enhance and craft a rad scroll experience. Normally a pain in the box; styling and managing scroll across touch, keyboard, mouse and more…
youtube.com
Experimenting With Scroll-Driven corner-shape Animations: "The new #CSS corner-shape() property is mathematical, so it’s easily animated. Author Daniel Schwarz pokes at animating the property for interesting UI effects." css-tricks.com/experimentin...
Experimenting With Scroll-Driven corner-shape Animations | CSS-Tricks
The new CSS corner-shape() property is mathematical, so it’s easily animated. Author Daniel Schwarz pokes at animating the property for interesting UI effects.
css-tricks.com
When All You Can Do Is All or Nothing, Do Nothing: "If your design system can only apply `loading=lazy` or `fetchpriority=high` blindly, it may be safer not to apply them at all." #performance csswizardry.com/2026/03/when...
When All You Can Do Is All or Nothing, Do Nothing – CSS Wizardry
If your design system can only apply `loading=lazy` or `fetchpriority=high` blindly, it may be safer not to apply them at all.
csswizardry.com
The Great #CSS Expansion: "CSS now does what Floating UI, GSAP ScrollTrigger, Framer Motion, and react-select used to require JS for. Here is how much that saves, why these libraries were painful beyond their size, and what the platform still hasn't figured out." blog.gitbutler.com/the-great-cs...
The Great CSS Expansion
CSS now does what Floating UI, GSAP ScrollTrigger, Framer Motion, and react-select used to require JavaScript for. Here is exactly how much that saves, why these libraries were painful beyond their…
blog.gitbutler.com
Two Circles, One Arrow, and Anchor Positioning: "Drawing an line with arrows pointing to the center of two arbitrary elements measuring and displaying the distance between them doesn't seem like it would be possible in #CSS alone… but…" frontendmasters.com/blog/two-cir...
Two Circles, One Arrow, and Anchor Positioning
Drawing an line with arrows pointing to the center of two arbitrary elements measuring and displaying the distance between them doesn't seem like it would be possible in CSS alone... but...
frontendmasters.com