Our top 5 CSS features from 2024
Today’s issue: Addy Osmani’s new tool for defeating the worst people on the internet, the Douglas Crockford paternity suit, and the Svelte library that belongs on Rocket Power.
Welcome to #351.
The Main Thing
My vibes after using View Transitions to animate my personal blog
Our top 5 CSS features from 2024
After years of begging browser vendors to make CSS better, I am now respectfully asking them to stop.
Ok, maybe not stop, but pause momentarily for the rest of us to get caught up. By my count, we’ve seen over 50 new features added to the CSS spec in the last 4 years – and unless you’ve been attending The Una Kravets School of CSS Witchcraft and Wizardry, it’s pretty tough to keep track of them all.
That’s why my big New Year’s resolution is to master all the new CSS features, starting with the top-5 most impactful updates from 2024:
-
Animating
height:auto: After years of having to reach for a library like Framer Motion, we can now do it with pure CSS. Is this real life? -
@starting-style: You know how janky it feels adding elements to the DOM and how that breaks transitions? Well apparently, this new property fixes that. -
Scroll-driven animations: This feature does what its name says and adds animations that are triggered on scroll to CSS. But will it save us from all those “scroll jacking” websites? Probably not, but we can dream.
-
The Popover API: This API lets you implement tooltips and popovers with pure CSS, but I am a little scared to see what the Tailwind classes will look like for this.
-
Document view transitions: This feature was added to the platform early this year, even though it now feels like it’s been around forever. It allows you to animate between HTML documents, and has quickly become a go-to API.
Bottom Line: Staying up til 2am on Christmas Eve to play around with the calc-size() function? These are the holiday memories we’ll cherish forever 🥹.
    |
Our Friends
(With Benefits)
When you have to write a bunch of custom code on top of the auth provider you already pay for
PropelAuth is purpose-built for B2B
“Ok, but doesn’t that seem… oddly specific?”
Sure it does – but once your big enterprise customers start asking about SAML, RBAC, and multi-tenancy, you’ll thank the auth gods that you’re not building all that cr*p yourself.
PropelAuth gives you every B2B feature you could ever need, with simple integrations and APIs that just work. A few highlights:
-
Easy onboarding with seamless signup and login pages, 2FA, and SSO logins
-
User impersonation lets you quickly resolve problems for your customers by allowing you to see what a specific user is seeing
-
Brand new CSV user imports, end-user audit logs, and more new features from their recent launch week
Check out the free tier – and see why one CTO said, “I’ve never come across a tool that works this well for authentication needs. 11/10 would recommend.”
Pop Quiz
Sponsored by Infinite Red
We are expert US-based consultants who have specialized in high-quality React Native development since 2015! Hire us to build, optimize, deploy, and support your React Native app.
What gets logged to the console?
const res = ["👨", "", "👩", "", "👧", "", "👦"].join('')
console.log(res)
Cool Bits
-
React, Visualized is a micro-site we created with a bunch of visualizations for major React concepts. Yes, we spent way too much time on it, but it helps keep the demons away.
-
beeps just launched an on-call platform for Next.js applications that
pings“beeps” you in Slack whenever there’s an incident in your app. It shows you all the contributing factors and tells you if it’s your code’s fault or a problem with one of your external services like Clerk or OpenAI. [sponsored] -
Addy Osmani used Transformers.js to build a free background image remover, which will save you from those monsters who upload fake PNG images that aren’t actually transparent.
-
Phil Hagelberg wants to remind you that Douglas Crockford is not your dad, which means two very important things: 1) you can put comments in your JSON files, and 2) you should probably stop sending him postcards asking him if he’ll come back home once the Angels win the pennant.
-
Matan Borenkraout wrote about a tasty little React anti-pattern to help you spice up the holidays.
-
Rohan Bhaumik and Lindsay Piper are hosting a free livestream on how to keep flaky tests from clogging up your CI. They’ll cover why flaky tests happen and how to handle them effectively – without hitting “rerun” every 5 minutes. [sponsored]
-
bolt.diy is a new, open-source version of bolt.new that lets you choose the LLM you use for each prompt.
-
Safari 18.2 claims to be “the biggest release of new features this year” for web developers. I’m pretty sure the PM in charge of the new Apple Photos
disasterredesign said the same thing, so let’s pray it’s better than that. -
Million Autopilot is a new VSCode extension for “fixing” slow React renders.
-
CarbonQA provides high-quality QA services that scale. Their US-based testers will break your app repeatedly and do all the manual testing you hate doing yourself. [sponsored]
-
State of Node.js performance 2024 analyzes all the new versions of Node that came out this year to look at how the runtime evolved in 2024.
-
Holger Dal Mogensen created Svader, a library for creating GPU-rendered Svelte components with WebGL and WebGPU fragment shaders. I’m 80% sure Svader is also the name of a character in Rocket Power who specializes in kick flips and pranking shoobies.
What gets logged to the console?
const res = ["👨", "", "👩", "", "👧", "", "👦"].join('')
console.log(res) // 👨👩👧👦
It’s the ”👨👩👧👦” emoji.
This works because the Unicode standard supports mapping individual emojis with zero-width joiners to create new emojis. In our case, taking individual emojis and joining them to get a family emoji. Wow, programming.