A look back at 2023 in frontend development

✍️ Hello, and happy new year! We're kicking off 2024 with a look back over the past twelve months, bringing you the highlights of what we've shared in Frontend Focus — you're bound to find something worth revisiting, bookmarking or sharing on. 2023 was a bountiful year, with the likes of CSS nesting, :has(), and much more arriving and having an impact on how we work.

If you've enjoyed the newsletter, please consider forwarding it to a friend — perhaps even someone starting their frontend journey this year. Let's get started, and thanks for reading!
__
Your editor, Chris Brandrick

🗓️ Top Ten of 2023

01: Six CSS Snippets Every Front-End Developer Should Know in 2023 — This look at a half-dozen toolbelt worthy, powerful, and broadly cross-compatible CSS techniques (including logical properties and container queries) proved very popular, and was the top link shared in Frontend Focus last year. Everything remains relevant in 2024 too, of course! 😏

Adam Argyle

Tackle Any HTML & CSS Challenge — Join Jen Kramer for this video course to practice and refine your CSS skills. Work through five projects leveraging various CSS layout techniques such as flexbox and grid, learn responsive design strategies, develop a strategy for supporting multiple devices, and more.

Frontend Masters sponsor

02: A Deep Dive Into SVG Path Commands — A very well presented, interactive guide to understanding SVG paths and path commands — it covers cursors, lines, bézier curves, and more, and remains a bookmark-worthy resource.

Nanda Syahrasyad

03: If Web Components Are So Great, Why Am I Not Using Them? — There was plenty of renewed chatter and attention on Web Components in the latter half of 2023, kicked off in part by Dave's analysis on the 'marketing problem' that this relatively slowly-adopted technology may have.

Dave Rupert

04: ▶️ 21 Awesome Web Features You’re Not Using Yet — An eight-minute video that's closing in on nearly a million views now. It runs through some of the then-new features on the web platform, and remains a solid high-level, informative run through.

Fireship

05: A Blog Post with Every HTML Element — A mammoth effort here — it's a bold attempt to squeeze every single valid HTML element (along with some former elements like <marquee> and <blink>) into a single place.

Patrick Weaver

Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Subscribe for free to get curated advice on building great products and best practices of top startups from PostHog.

PostHog sponsor

06: Ten Weird HTML Hacks That Shaped the Internet — A superb, curious history lesson here looking back at old table hacks, CSS kludges, and various quirky coding strategies that helped web developers get things looking good before we had the modern tools at our disposal now.

Ernie Smith

07: The Top Front-End Tools of 2022 — It might feel a bit dated to share a 2022 round-up in 2024, but this collection of handy frontend tools remains relevant nonetheless with plenty of tools to help speed up your workflow.

Louis Lazaris

08: The Truth About CSS Selector Performance — It's true. Certain CSS selectors are faster than others. This article explains, outlining the ones that are important to keep an eye on for performance.

Patrick Brosset

09: An Interactive Guide to CSS Grid — An excellent primer from Josh on all things CSS Grid, sharing a mental model we can adopt in order to best understand how CSS Grid works and how we can use it effectively.

Josh Comeau

🗓️ [Workshop] An Intro To Debugging Next.js With Sentry — Join us to learn: Sentry basics, how to identify Next.js issues, and if an error occurred on the client or server side.

Sentry sponsor

10: The 'End' of Front-End Development — Another from Josh, this time addressing the rise of AI language models and how they may impact programming. Josh noted he was “much more optimistic about what these AI advancements mean for the future of software development”.

Josh W. Comeau

ℹ️ Normal service resumes next week, catch you then! — Chris 👋