--- title: "2023 was kind to CSS and the web platform" publication: "Frontend Focus" issue: 622 published_at: "2023-12-13" canonical_url: "https://frontendfoc.us/issues/622" --- Plus HTML5 Boilerplate is back. | 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/learn/typescript/?utm_source=email&utm_medium=frontendfocus&utm_content=typescript) 🚀 Frontend **Focus** #​622 — December 13, 2023 | [Read on the web](https://frontendfoc.us/issues/622) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1702465601/hrcszduhto3u7befifif.png)](https://developer.chrome.com/blog/css-wrapped-2023) [CSS Wrapped: 2023](https://developer.chrome.com/blog/css-wrapped-2023) — 2023 was truly a huge year for all things CSS. This detailed post from the Chrome teams brings together all of the headline features that landed in Chrome and across the web platform this year, including nesting, new color functions, the `:has` selector, linear-easing, and much much more. There’s been so much added to our CSS tool belt this year, that this recap may prove handy in reminding us all what we can now actually do. Chrome for Developers [WebKit Features in Safari 17.2](https://webkit.org/blog/14787/webkit-features-in-safari-17-2/) — The WebKit team are closing out the year with a sizeable release of Safari, packing in 39 new features and over 150 various fixes. Notable additions include richer CSS nesting support, new math functions, support for preloading responsive images, new sizing units — including the likes of `cap`, `ch`, and `ex`. Lots to dig into here. Jen Simmons and Marcos Cáceres (WebKit) [![\](https://copm.s3.amazonaws.com/6d884435.png)](https://frontendmasters.com/learn/typescript/?utm_source=email&utm_medium=frontendfocus&utm_content=typescript) [New TypeScript Courses: Take the Learning Path](https://frontendmasters.com/learn/typescript/?utm_source=email&utm_medium=frontendfocus&utm_content=typescript) — Join Mike North (Tech Lead at Stripe) for this series of brand new TypeScript courses. You'll get hands-on practice covering both the fundamentals and advanced features like utility types and advanced generics. Learn best practices to configure and evolve your TS codebase! Frontend Masters sponsor [You Don't Need JavaScript for That](https://www.htmhell.dev/adventcalendar/2023/2/) — Killian notes that a core principle of web development is choosing the least powerful language suitable for a given purpose. In practice this means preferring HTML over CSS, and then CSS over JS. Killian Valkhof [HTML5 Boilerplate v9.0.0 Released](https://htmlcssjavascript.com/web/html5-boilerplate-v9-0-0-released/) — A bit of a blast from the past! This popular frontend template (with over 50k stars on GitHub) was last updated over three years ago, but is back with a flurry of sensible changes. [GitHub repo](https://github.com/h5bp/html5-boilerplate). Rob Larsen ⚡️ Quick Links - 🗳️ It's the final week to take the [State of JavaScript survey](https://survey.devographics.com/en-US/survey/state-of-js/2023) for 2023. - 🗓️ Tis the season for advent calendars full of themed web dev content, and [Adrian Roselli has a round-up of all the ones worth keeping an eye on here](https://adrianroselli.com/2023/12/web-development-advent-calendars-for-2023.html). - 💬 Eric Meyer reflects on [three decades of writing HTML](https://meyerweb.com/eric/thoughts/2023/12/06/three-decades-of-html/). - 🎟️ Beta invites for the [Windows version of the Arc Browser](https://www.neowin.net/news/arc-browser-for-windows-beta-invites-are-finally-being-sent-out/) are being sent out. - 🎤 WordPress's Matt Mullenweg recently [delivered his annual 'State of the Word' keynote](https://wordpress.org/news/2023/12/state-of-the-word-2023-recap/), outlining where the popular CMS is, and where it's heading. - 🔗 Remy Sharp is working on [unrot.link](https://unrot.link/) a service, [which he explains here](https://remysharp.com/2023/12/04/unrot-that-link), promises to prevent and undo link rot on long lived web sites. - 📑 Netlify’s [State of Web Development Report](https://www.netlify.com/blog/unveiling-the-state-of-web-development-and-predictions-for-2024-and-beyond/) for 2023 is out. - 🎁 Need a last-minute gift? [This typographic tear-off calendar](https://www.slanted.de/product/typodarium-2024/) is lovely. 📙 **Tutorials, Articles & Opinion** [Preparing For Interaction To Next Paint, A New Web Core Vital](https://www.smashingmagazine.com/2023/12/preparing-interaction-next-paint-web-core-vital/) — Starting in March, ‘Interaction to Next Paint’ will formally replace ‘First Input Delay’ as a Core Web Vital metric. Here’s how the two metrics differ, why we needed a new way to measure interaction responsiveness, and how you can start optimizing the performance of your site for a seamless transition to this new metric. Geoff Graham [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1702466878/pobknrfaskaalb14sabs.png)](https://fffuel.co/svg-spinner/) [An Interactive Guide to SVG Loading Spinners](https://fffuel.co/svg-spinner/) — Lots of good visuals and code examples here showing us, step-by-step, how to create neat looking SVG loading spinners (using attributes like `stroke-dasharray` and `stroke-dashoffset`). Sébastien Noël [[Live Tomorrow\] Finding and Fixing JavaScript Code Causing Slowdowns](https://sentry.io/resources/improve-web-browser-performance-find-the-javascript-code-causing-slowdowns/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=general-fy24q4-performanceworkshop&utm_content=newsletter-performanceworkshop-register) — Learn how to take action on Web Vitals, find code-level bottlenecks, and speed up load times for good. [Join us online](https://sentry.io/resources/improve-web-browser-performance-find-the-javascript-code-causing-slowdowns/?utm_source=frontendfocus&utm_medium=paid-community&utm_campaign=general-fy24q4-performanceworkshop&utm_content=newsletter-performanceworkshop-register). Sentry sponsor [How to Use Responsive HTML Video (...and Audio)](https://scottjehl.com//posts/using-responsive-video/) — The responsive video standard now works across all major browsers. Scott Jehl [Lost in Translation: Tips for Multilingual Web Accessibility](https://benmyers.dev/blog/multilingual-web-accessibility/) — Some practical tips for navigating the intersection between web accessibility and internationalization/localization. Ben Myers [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1702467059/bx1lq9dqqqevxsl39df8.jpg)](https://blog.pope.tech/2023/11/27/how-to-use-chromes-accessibility-tree/) [How to Use Chrome's 'Accessibility Tree'](https://blog.pope.tech/2023/11/27/how-to-use-chromes-accessibility-tree/) — A look at what the accessibility tree is, how to access it, and how to use its information. Whitney Lewis [How I Brought My LCP Down to Under 350 ms for Google-Referred Users](https://blog.pawelpokrywka.com/p/how-i-took-lcp-down-under-350ms) — An exploration of the techniques used to optimize performance on a high-traffic website. Paweł Pokrywka [Simplifying Web Performance with a Single UX Score](https://calendar.perfplanet.com/2023/simplifying-web-performance-with-a-single-ux-score/) Sander van Surksum [A Coder Considers the Waning Days of the Craft](https://www.newyorker.com/magazine/2023/11/20/a-coder-considers-the-waning-days-of-the-craft) James Somers [Browsing the Eastern Side of the Personal Web](https://www.bikobatanari.art/posts/2023/east-west-website-culture) bikobatanari 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1702465925/awccuq4cqqhytkuudipt.png)](https://epiceasing.com/?curve=0.470%2C0.000%2C0.745%2C0.715&language=css) [Epic Easing: An Interactive Tool to Generate Custom Easing Functions](https://epiceasing.com/?curve=0.470%2C0.000%2C0.745%2C0.715&language=css) — A fun way to mess around with and learn easing functions, with lots of pre-built examples. The tool also lets you export as CSS, SCSS, Swift, and even Objective-C. Meritt Thomas [AutoAnimate: Add Motion to Your Apps with a Single Line of Code](https://auto-animate.formkit.com/) — You can view some nice examples on the page and this can be used with React, Vue, Svelte, or just plain JavaScript. FormKit [Build with the Power of Code — Without Writing Any](https://sponsr.is/webflow_frontendfocus_dec13) — Take control of HTML, CSS, and JavaScript in a visual canvas. Webflow generates clean code, ready to publish. Webflow sponsor [Clamp Calculator: Generate Custom CSS for Fluid Typography Using `clamp()`](https://utopia.fyi/clamp/calculator/) — A helper for fluid type in responsive designs that allows you to generate any number of custom properties using CSS’s `clamp()` function, representing fluid type tokens you can drop into a project. James Gilyead and Trys Mudford [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1702465243/h10zs0pnacekas5okgk2.jpg)](https://userstock.io/) [UserStock: Free Photos of People's Faces to Use as Avatars in Mockups and Prototypes](https://userstock.io/) — Includes drop-downs to filter using one of five different age groups and/or image style, but most importantly: these are _not_ AI-generated images. UserStock [SVGO 3.1: A Node.js-Powered SVG Optimizer](https://github.com/svg/svgo) — If you’ve worked with SVG (Scalable Vector Graphics) at all, you’ve probably seen they can be filled with all sorts of junk code.. SVGO to the rescue. Kir Belevich [Color Lisa: A Curated List of Color Palettes Based on Masterpieces](https://colorlisa.com/) — A unique way to get some color inspiration from those who've used color best. Scroll alphabetically through artist names and view a hex-based color palette for that artist’s most famous piece of work. RYAN MCGUIRE [Keep React: A Library of 40+ Components Built with React and Tailwind](https://react.keepdesign.io/) — View all the components in the docs [here](https://react.keepdesign.io/docs/components/alert), where you’ll find lots of interactive demos. StaticMania [Better Commits: A CLI for Creating Better Commits Following the Conventional Commit Guidelines](https://github.com/Everduin94/better-commits) Erik Verduin [CodeSnaps: A Component Library Built with Tailwind and Next.js](https://www.codesnaps.io/) Kaumon A 📬 **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/622/*|UID|*?ipx=t)