CSS Wrapped 2024! A great rundown of the latest changes in CSS, including things that are widely available, things that will soon be available, and some things that are currently Chrome-only experiments.

Animating the (previously) impossible with CSS: You can use @starting-style in combination with transition: allow-discrete to animate to and from display: none or dialog[open]. Soon it will also be possible to animate height: auto!

CSS now has built-in virtualization, a performance optimization for long lists or complex pages that used to be very annoying to implement: content-visibility

Soon finally possible: Complex customization of the browser-native select component. Currently in Chrome Canary, but expected to be widely supported some time in 2025. Check out this demo to get an idea what to expect. Love to see it! The part about backwards compatibility blew my mind. All the details and a request for feedback are here.

With all those new features, how do you know what you can already use? Besides the always great Can I use?, there’s now the Web Platform Status Dashboard that specifically tracks new additions to the platform and alignment efforts between browsers. Best served 🍳 with polyfills, @supports and strategies like graceful degradation (remember the select?) so you can start using most of these already today.

Here’s a little trick that allows you to make pretty callout boxes with Markdown on GitHub.

I haven’t watched it yet but here is a talk about hexagonal architecture apparently by the guy who invented it? Sounds interesting!

Speaking of GitHub: not new but also not very well known—press . in any repository on GitHub or change the domain of the URL from .com to .dev to open the repository in an in-browser VS Code. Great for browsing codebases! If you use settings sync, you can even use your extensions, theme, and other settings. Try it!

Some inspiration for “how to go beyond surface level skills and really dive deep on a topic”.

The Hype Around Signals:Good explanation of the idea behind “fine-grained reactivity”, i.e. the UI rendering pattern that almost all frameworks—except React—are using.

Excited about Tailwind 4 already? It’s now in beta. Here’s a deep dive with one of the authors about the new features. (Fair warning: not very structured so you might find yourself skipping quite a bit, but I still found it interesting.)

Most of the 2024 web almanac is now available: “a comprehensive report on the state of the web, backed by real data and trusted web experts. The 2024 edition is comprised of 21 chapters spanning aspects of page content, user experience, publishing, and distribution.”

Vite 6 has been released and it’s at the same time rather boring and a huge update. Boring because almost nothing changes for end users (yay!). Huge because it has tons of internal refactoring and improvements, most notably the experimental environment API. This will enable frameworks that build on top of Vite (such as Nuxt, Remix, and SvelteKit) to provide better DX.

I refer to this all the time, so too this month. Exports in JavaScript are tricky: export default thing is different to export { thing as default }