Friday Front-End

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...

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...

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...

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...

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...

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...

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...

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...

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/

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-...

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?

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 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...

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...

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...

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...

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...

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...

Sneaky Header Blocker Trick: "When people notice it, they ask how on earth it works. It feels like it defies the rules of #CSS! I’ll break down the surprisingly-straightforward implementation so you can start using this trick yourself." www.joshwcomeau.com/css/header-b...

Today's lunch videos is "Is Sass Dead Yet? #CSS Mixins and Functions" - "What can we do with functions and mixins, how will they be different from Sass, and what other features might this open up in the future?" www.youtube.com/watch?v=IIvq...

Dropdowns Inside Scrollable Containers: Why They Break And How To Fix Them Properly #CSS www.smashingmagazine.com/2026/03/drop...

Modal vs. Separate Page: #UX Decision Tree: "How to choose between modals and pages, when to avoid modals, and how to determine the right level of interruption or navigation." www.smashingmagazine.com/2026/03/moda...

SVG favicons that respect theme preference: "Less of guide about the favicons and more a bug report of Safari that at the moment ignores media query user preferences in #SVG favicons." pawelgrzybek.com/svg-favicons...

Building dynamic toggletips using anchored container queries: "With anchored container queries and other modern #CSS features like attr(), corner-shape, and interest invokers, we can use progressive enhancements to create some really awesome toggletips." piccalil.li/blog/buildin...

Flexbox Masonry Layout (Explained with Math): "Flexbox has a very specific algorithm for determining how to deal with remaining (or lack of) space in a row. Let's use actual math to understand it then apply it to a masonry layout." #CSS frontendmasters.com/blog/flexbox...

Today's lunch video is "Little Dummies: Simple FPO Content Helpers" - "Eleventy is great for rapid prototyping! Here are my favorite shortcodes, filters and other techniques to quickly populate interactive mockups and wireframes with 'dummy' placeholder content." www.youtube.com/watch?v=NHgi...

The Enforced Accessibility of the Geolocation Element: "It enforces a variety of accessibility requirements quite strictly. I’m not sure if we’ve had an element in HTML that behaves quite like this before." #a11y frontendmasters.com/blog/the-enf...

Un-Sass'ing My #CSS: Colour Functions Without Sass: "A practical guide to replacing Sass color functions like lighten(), darken(), and tint() with modern CSS using color-mix() and relative color syntax." www.alwaystwisted.com/articles/UnS...

#CSS contrast-color() beyond black & white: "Two techniques that bypass the black-or-white limit of contrast-color() for custom color palettes." una.im/advanced-con...

The Big Gotcha of Anchor Positioning: "I thought that one of the benefits of #CSS Anchor Positioning is you can position elements relative to others regardless of where they are in the DOM. But no, you can’t. There are limitations which feel inscrutable at first." frontendmasters.com/blog/the-big...

Abusing Customizable Selects: "Let’s go over a few demos using the new customizable `<select>` feature that may be wild, but also give us a great chance to learn new things in #CSS." css-tricks.com/abusing-cust...

Today's lunch video is "Building a Computer with #CSS" - "Ever wondered how a computer actually works? What a CPU is actually built of? And if it's possible to build one using only CSS? If so, this talk is for you." www.youtube.com/watch?v=PFqt...

AI will Eliminate the Need for Accessibility Professionals? I think not. "Let AI handle mechanical checks and grunt work. But can it replace humans who understand the nuanced reality of disability? Don't say you weren’t warned when your next lawsuit arrives." #a11y buttondown.com/access-abili...

Why we teach our students progressive enhancement: "A famous example of PE is when an escalator breaks down it can still be used as stairs, which satisfies its core task. Progressive enhancement isn't about preventing failure, it’s about defining what must always work." cydstumpel.nl/why-we-teach...

Popover API or Dialog API: Which to Choose? "Choosing is difficult because they seem to do the same job, but they don’t! After lots of research, I discovered that the Popover API and Dialog API are wildly different in terms of accessibility." #a11y css-tricks.com/popover-api-...

I'd heard <select> is customizable now, but I didn't understand just how much until I saw this demo. The <select> opens a full Duck Hunt-style game with no JS! And because it's still just a native <select> under the hood, it's even keyboard accessible! Wild stuff. #CSS codepen.io/t_afif/pen/P...

How We Do Code Reviews at Cloud Four: "If your team members dread the notification that they’ve been added as a reviewer on a pull request, I think the following guidelines can help." cloudfour.com/thinks/how-w...

Today's lunch video is "Smart Layouts" - "In this talk, I’ll walk you through my process of building smarter layouts that are aware of their surroundings and context, in the hope of inspiring you to take the next step and use modern #CSS in your workflow." www.youtube.com/watch?v=_njU...