--- title: "Here's what went down in 2024" publication: "Frontend Focus" issue: 673 published_at: "2024-12-18" canonical_url: "https://frontendfoc.us/issues/673" --- Reviewing the highs and lows of the year. | Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/complete-react-v9/?utm_source=email&utm_medium=frontendfocus&utm_content=reactv9) πŸš€ **Frontend** Focus #​673 β€” December 18, 2024 | [Read on the web](https://frontendfoc.us/issues/673) ![](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1734348260/hbrgsudkzkcc7rgagjem.png) ✍️ **Hello, and welcome to the last issue of Frontend Focus for 2024!** It's been a packed year for the web platform, with plenty of exciting new features added to our developer toolbelt, improvements in browser cooperation, the developing AI tooling situation, and much more. As ever, we're going to take a look back over what we've shared in _Frontend Focus_ throughout 2024 and revisit some of the highlights β€” you'll no doubt find something that's well worth bookmarking, sharing on, or revisiting (or maybe you missed it the first time). If you've enjoyed the newsletter and found it valuable this year, please consider [following us on Bluesky](https://bsky.app/profile/frontendfocus.bsky.social), and maybe forwarding this on to a friend β€” perhaps even someone starting their frontend journey in the new year. A big thanks for reading. We'll be back in your inbox in early January. _Now, it's a big issue, so let's get started!_ __ _Your editors, πŸ¦‹ [Chris Brandrick](https://bsky.app/profile/brandrick.bsky.social) & [Peter Cooper](https://bsky.app/profile/cooperx86.bsky.social)_ πŸ—“οΈ Top Ten of 2024 01: [Twelve Modern CSS One-Line Upgrades](https://moderncss.dev/12-modern-css-one-line-upgrades/) β€” Stephanie shared this list of a dozen CSS properties that are well worth knowing earlier in the year β€” the one-line upgrades here will help reduce technical debt, remove unnecessary lines of JavaScript, and score some easy wins for the user experience, too. Stephanie Eckles [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/d652a898.png)](https://frontendmasters.com/courses/complete-react-v9/?utm_source=email&utm_medium=frontendfocus&utm_content=reactv9) [Complete Intro to React v9: New Project, Modern Stack](https://frontendmasters.com/courses/complete-react-v9/?utm_source=email&utm_medium=frontendfocus&utm_content=reactv9) β€” Join Brian Holt in building a pizza delivery app from scratch. Master hooks, TanStack Router, testing, and React 19 features in this comprehensive guide to modern React development. No prior React experience needed. Frontend Masters sponsor 02: [Five CSS Snippets Every Frontend Developer Should Know in 2024](https://web.dev/articles/5-css-snippets-every-front-end-developer-should-know-in-2024) β€” Adam did this [in 2023](https://web.dev/articles/6-css-snippets-every-front-end-developer-should-know-in-2023), and the 2024 version proved very popular too. All the snippets here are toolbelt worthy, powerful, CSS tips (including nesting, sub grid, container query units, etc) that will be just as valuable as we head into 2025. Adam Argyle 03: [Inline Conditionals in CSS?](https://lea.verou.me/blog/2024/css-conditionals/) β€” In the summer the CSS Working Group [resolved to add](https://github.com/w3c/csswg-drafts/issues/10064) an inline `if()` to CSS. An exciting step for CSS, but one that raises lots of questions too. This explainer from Lea proved valuable for many. Lea Verou 04: [What You Need to Know about Modern CSS](https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-2024-edition/) β€” A bookmarkable guide from this past Spring featuring a list of all the then new additions to CSS (_think nesting, view transitions, `:has()`, etc_). It remains really handy, as there’s an explainer, demo, code example, and a quick bit of detail as to why you should care about each entry. If you want to scrub up on what new CSS features we've gotten this year, this ain't a bad place to look. Chris Coyier ⚑️ IN BRIEF **Here's just a few quick snippets of things that went down in the world of Frontend this year:** - πŸ’¨ There was plenty of continued steam behind the efforts to get [a formal solution in place for CSS masonry](https://css-tricks.com/css-masonry-css-grid/). - βš™οΈ It was [a big year for Web Components](https://utilitybend.com/blog/getting-into-web-components-an-intro/) and our shared understanding and utilization of them. - πŸ—“οΈ The Web turned 35 β€” [here's what Sir Tim Berners-Lee had to say](https://webfoundation.org/2024/03/marking-the-webs-35th-birthday-an-open-letter/). - 🍏 Apple announced [significant changes](https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-european-union/) to iOS, Safari, and the App Store for those in the European Union. - πŸ“± ...and as part of those changes, came a [fight on the future of PWAs on iOS](https://open-web-advocacy.org/blog/apple-backs-off-killing-web-apps/). - πŸͺ Google [changed the deprecation timeline](https://privacysandbox.com/news/privacy-sandbox-update/) for third-party cookies...again. The [W3C had thoughts](https://www.w3.org/blog/2024/third-party-cookies-have-got-to-go/)... - 😬 WordPress got into a scrap with WP Engine, and [it got messy](https://wpvswpe.report). - πŸ—³οΈ We got the results from the [2024 State of CSS](https://2024.stateofcss.com/en-US/), and [State of HTML](https://2024.stateofhtml.com/en-US/) surveys, plus as of _just yesterday_ the 2024 edition of the [State of JS](https://2024.stateofjs.com/en-US) dropped. - πŸŸͺ CSS [got it's own logo](https://github.com/CSS-Next/logo.css#readme)! Goodbye CSS3 shield. 🫑 - πŸ“‘ The excellent, comprehensive [Web Almanac returned to summise the year](https://almanac.httparchive.org/en/2024/), sharing the state of the web in 2024. 05: [How to Center a Div](https://www.joshwcomeau.com/css/center-a-div/) β€” The fact that so many of you tapped on this one tells us that it's still something of a tricky ordeal to get right. Yes, it's easier now thanks to new tools (Flex, Grid, etc), but which to use? Josh shares the trade-offs between different approaches, and the best strategies to use. Josh W Comeau 06: [The Magic of Clip Path](https://emilkowal.ski/ui/the-magic-of-clip-path) β€” This post sets out to β€œinspire you and show you that thinking outside the box can lead to some great animations” β€” all via the magic of the very powerful `clip-path` CSS property. Emil Kowalski [AuthKit: The World’s Best Login Box β€” Powered by WorkOS & Radix](https://www.authkit.com/?utm_source=cpff&utm_medium=newsletter&utm_campaign=q42024) β€” AuthKit is a complete solution for authentication, authorization, and user management. It’s free up to 1 million MAUs and comes standard with RBAC, bot protection, MFA, and more. AuthKit sponsor 07: [CSS Selectors](https://css-tricks.com/css-selectors/) β€” A thorough, complete guide covering all of the various methods we have to select elements in CSS (such as pseudo-selectors, nested selectors, attribute selectors, etc) and how to use them for applying styles. Geoff Graham 08: [An Interactive Guide to CSS Container Queries](https://ishadeed.com/article/css-container-query-guide) β€” This is a detailed explainer on [CSS container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries), exploring the problems they solve, how they work, and how we can use them in our workflows. Lots of code and visuals to help things along too. Well worth bookmarking. Ahmad Shadeed πŸ’‘ Josh Comeau also took a look at Container Queries this year, noting that adoption so far isn't all that high. [Here he goes into why that may be](https://www.joshwcomeau.com/css/container-queries-introduction/), reintroduces us to the feature, and suggests how we may want to approach using it. 09: [How to Make Your Web Page Faster Before It Even Loads](https://blog.sentry.io/how-to-make-your-web-page-faster-before-it-even-loads/) β€” Salma looked at the events that happen _before_ the first byte of a web page is even received by the browser. Asking if we can measure those events, and subsequently optimize them to make our web pages and applications load even faster. Neat. Salma Alam-Naylor 10: [The Frontend Developer/Engineer Handbook 2024](https://frontendmasters.com/guides/front-end-handbook/2024/) β€” This incredibly in-depth and detailed guide on the current web development landscape was well received. It's remains a superb resource for getting up to speed on everything from code editors, CSS, UX, UI, the command line, performance, accessibility, testing, AI, and much, much more. Cody Lindley 🧰 Popular Tools & Resources we shared this year [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1734427865/pz0ucwv4k2etm8jfyt8x.png)](http://anchor-tool.com/) [Anchor Position Tool](http://anchor-tool.com/) β€” CSS anchor positioning is on the way, and one rather neat layout mechanism that’s part of the spec is `position-area`. This (Chromium 129+ only) demo from Una demonstrates how it works. There was plenty of interest in this one, and although it's still in [draft](https://www.w3.org/TR/css-anchor-position-1/), it should prove rather powerful once widely available. Una Kravets [Speedometer 3.0: A Browser Benchmark for Webapp Responsiveness](https://browserbench.org/announcements/speedometer3/) β€” 2024 gave us a new major release of Speedometer β€” the first with a cross-industry collaborative approach supported by each major browser engine (Blink, Gecko, WebKit). [Version 3](https://www.browserbench.org/Speedometer3.0/about.html) added in many new tests, performance wins, and improvements. You can [run the test for yourself here.](https://browserbench.org/Speedometer3.0/) Apple, Google, Microsoft, and Mozilla [CSS Grid Generator](https://cssgridgenerator.io/) β€” This handy browser-based tool got plenty of you clicking β€” you can use it to easily create custom CSS grid layouts β€” you can specify the number of columns, rows, and gutter size. Kristjan Retter [A Showcase of What's Now Possible with Progressive Web Apps](https://whatpwacando.today/) Danny Moerkerke [Jake's 'Slightly More Opinionated' Modern CSS Reset](https://jakelazaroff.com/words/my-modern-css-reset/) Jake Lazaroff [Barba.js: Create Smooth Visual Transitions Between Pages](https://barba.js.org/) De Rosa, Michel, et al. [Plain Vanilla: A Tutorial Website for Modern, Vanilla Web Development](https://plainvanillaweb.com/) Joeri Sebrechts [PixiJS v8: A Library For Building Striking 2D WebGL Experiences](https://pixijs.com/blog/pixi-v8-launches) PixiJS Team [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1730897753/vrnqqbg2vtimkysnqwz6.png)](https://go.bsky.app/BwStos9) πŸ¦‹ Frontend on Bluesky ...and finally, this year has seen plenty of folks make the jump over to Bluesky for talking all things frontend. To help things along, we [created a handy list](https://go.bsky.app/BwStos9) that brings together some of the voices that you may want to hear from. It's proven useful for many, so I'm sharing it here again to sign off the year with. _See you in 2025!_ πŸ“¬ **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/673/*|UID|*?ipx=t)