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 — 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)

New TypeScript Courses: Take the Learning Path — 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 — 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 — 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.

Rob Larsen

Preparing For Interaction To Next Paint, A New 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

An Interactive Guide to SVG Loading Spinners — 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 — Learn how to take action on Web Vitals, find code-level bottlenecks, and speed up load times for good. Join us online.

Sentry sponsor

How to Use Responsive HTML Video (...and Audio) — The responsive video standard now works across all major browsers.

Scott Jehl

Lost in Translation: Tips for Multilingual Web Accessibility — Some practical tips for navigating the intersection between web accessibility and internationalization/localization.

Ben Myers

How to Use Chrome's '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 — An exploration of the techniques used to optimize performance on a high-traffic website.

Paweł Pokrywka

Epic Easing: An Interactive Tool to Generate Custom Easing Functions — 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 — 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 — 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() — 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

UserStock: Free Photos of People's Faces to Use as Avatars in Mockups and Prototypes — 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 — 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 — 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 — View all the components in the docs here, where you’ll find lots of interactive demos.

StaticMania