We can animate to `auto` now!

Published about 1 year ago • 1 min read

Hello Reader,

A day late with my newsletter this week, mostly because I completely forgot to write it last week!

I have a spot on my calendar for writing my newsletter, but I was really immersed in a project I’m working on and told myself that I’d do it later, and then I simply forgot 😅.

I’ll have some news on what that project is soon-ish, but since it’s Monday morning and I’ve got a few other things that need doing as well, let’s just jump into the main content!

📅 Mark your calendar

I’m going to be talking at JetBrains JavaScript Day 2024 edition this Thrusday.

It’s a remote conference and completely free!

As the name of the conference implies, it’ll be very JS heavy, with some really good talks lined up, but I’ll be there to play a bit of a spoiler with my talk You don’t need JavaScript for that.

Again, it’s a free event that you can register for here.

🙋‍♂️ What I’ve been up to this week

As I mentioned, a lot of my week was spent working on a project that I’m really excited about.

I almost started working on it again this morning because I’m so excited for it… but I have a lot of other things that need doing, so I’m doing my best to put it on pause for a little bit.

But I did have a regular video as well, and this one on interpolate-size: allow-keywords is one of the new CSS features that I’m so happy we finally have!

That’s right, we can animate to and from auto, and any other intrinsic size now.

Here's a CodePen with the code from the video if you want to play around with it (currently Chromium-only).

What I didn’t cover in the video was the also new calc-size() feature, which can take animating to and from auto to another level because we could use that to do calculations based on auto (and other intrinsic sizes).

Bramus’ article on the Chrome for Developers blog that introduced me to interpolate-size also goes into calc-size as well, if you’d like more info on both of them.

🏁

No stuff from around the web this week because I haven’t really been on the web much this past week.

It’ll be back next week though, when we’ll return to the regular Sunday schedule.

Until then, have a great week!
Kevin

Unsubscribe · Preferences
600 1st Ave, Ste 330 PMB 92768, Seattle, WA 98104-2246

When your passion becomes a grind

View this email in your browser (or share it with a friend!) Hello Reader, Before we dive into the content of this one, I want to let you know that this will be the last newsletter of the year, and I’ll be back in your inboxes sometime in mid-January. I’ll still have YouTube videos coming out, so you can keep an eye out over there by making sure you’re subscribed (only like 4,000 away from 1 million!). I’ll also do a quick roundup of all the content I put out once the newsletter resumes. With...

9 days ago • 5 min read

My favorite new CSS feature

View this email in your browser (or share it with a friend!) Hello Reader, It’s hard to pick one thing because there is so much to pick from right now, but I think my favorite new CSS feature is anchor positioning. Check out this navigation that I’ve put together for a project I’m working on, where the underline and link highlight is all from a single pseudo-element. That’s all done with something like 20 lines of CSS! And, with a handful more, I created a decent fallback for browsers that...

16 days ago • 4 min read

Nesting crash course, a fun gradient trick and a really hard quiz

View this email in your browser (or share it with a friend!) Hello Reader, A very short email this week, with a little less content than usual. Between the Black Friday Sale, my Smashing workshop, and a few other things, it’s been pretty hectic! Luckily I knew this was all coming and made some regular content for all of December already 😅. 🙋♂️ What I’ve been up to this week Getting started with CSS Nesting CSS Nesting is awesome, though there are a few important things to know about it, which...

23 days ago • 1 min read

Hi! I'm Kevin