Friday Front-End’s Top Links of 2024

  • 3 min read

TL;DR: In 2024, Friday Front-End shared a curated list of five articles and one video every week. Here are the links that were most popular.

Image credit: Eyestetix Studio

Every week on Friday Front-End, I share a curated list of five articles and one video. It's fun at the end of the year to look back and see which links got the most traction. This year, I stopped posting on Twitter, and started posting on Bluesky instead. I don't have any useful analytics from either, but here are the links that got the most clicks in the newsletter and Mastodon.

  • What is CSS Motion Path?

    10: What is CSS Motion Path?

    Quite simply, CSS Motion Path is a CSS property used to animate an element along a path. This path can be anything - one you've created yourself or taken from an existing design. The element you want to animate can also be anything - HTML or even another SVG. In the past, you needed complicated math or a even Javascript library to handle animating elements in this way. Now it can be done with a few lines of CSS. Let’s find out how!

  • The Perfect Theme Switch Component

    9: The Perfect Theme Switch Component

    We’ll take a progressively enhanced approach, first supporting light and dark themes with CSS alone and then adding a few lines of JavaScript to allow users to select their preferred theme.

  • Tailwind Marketing and Misinformation Engine

    8: Tailwind Marketing and Misinformation Engine

    My guess: It's only a matter of time before Tailwind collapses. The vendor-specific language and the misleading communication cannot hold water very long. The utility soup produced today will eventually turn into a technical debt. The next generation looks back and asks: "You actually wrote that?" Learn to write clean HTML and CSS and stay relevant for years to come.

  • The Showy / Hidey Navigation Bar

    7: The Showy / Hidey Navigation Bar

    That’s definitely the technical term for it. It’s that popular navbar pattern where the header disappears above the screen as you scroll down, affording you more content consumption space, but then, as if it were waiting just out of view for you, reappears upon the slightest scroll up.

  • Tailwind vs Semantic CSS

    6: Tailwind vs Semantic CSS

    This study compares two websites with identical design: the commercial Spotlight template from developers of Tailwind vs the same site with semantic CSS. The gist: Semantic version is 8× smaller, renders faster, and requires no JavaScript bundlers/tooling.

  • Transition to height: auto & display: none Using Pure CSS

    5: Transition to height: auto & display: none Using Pure CSS

    Find out how to easily transition to intrinsic sizes and trigger transitions when an element receives its first style update using new CSS features.

  • A Rant about Front-end Development

    4: A Rant about Front-end Development

    Yes. I am absolutely calling React a problem. I’m calling Angular, Vue, and All the Rest of Them™ a problem. Because unless you have a specific problem of highly interactive, data-driven content, you don’t need a framework. You don’t need a framework to render static content to the end user. Stop creating complex solutions to simple problems.

  • Five CSS snippets every front-end developer should know in 2024

    3: Five CSS snippets every front-end developer should know in 2024

    Toolbelt worthy, powerful, and stable CSS you can use today. I believe every front-end developer should know :has() is more than a "parent selector", the how and why of a subgrid, how to nest with built-in CSS syntax, how to let the browser balance headline text wrapping, and how use container query units.

  • The Front End Developer/Engineer Handbook 2024

    2: The Front End Developer/Engineer Handbook 2024

    This handbook is a resource for both seasoned professionals and newcomers in the field of front-end web development to learn and explore the practice of front-end development.

  • The deskilling of web dev is harming the product but, more importantly, it's damaging our health – this is why burnout happens

    1: The deskilling of web dev is harming the product but, more importantly, it's damaging our health – this is why burnout happens

    Of course you’re having problems keeping up with everything that’s happening in web dev. Of course! You’re expected to follow half-a-dozen different specialities, each relatively fast-paced and complex in its own right, and you’re supposed to do it without cutting into the hours where you do actual paid web development.

And here's the most popular video of 2024:

  • 23 CSS features you should know \(and be using\) by now

    23 CSS features you should know (and be using) by now

    As much as I love talking about cool new CSS features, there are a ton of super useful features that have fantastic browser support that go under the radar. So today, it's time to go over a bunch of those and I'm joined by my good buddy Adam Argyle.

Want to enjoy more great links like this in 2025? Subscribe to the Friday Front-End newsletter, or follow Friday Front-End on Bluesky or Mastodon!