Hello Reader,

Lots to share this week, so we’re going to open with some quick hits!

• I’ll be speaking about smart layout patterns with modern CSS at Smashing Conf New York on Oct 6-10, and there are still a few tickets left if you’re interested, and this link gets you 15% off the regular price.
• If you can’t make it to that, on October 24th I’ll be talking at JetBrain’s JavaScript Day, talking about how all the things you don’t need JavaScript for. This one’s remote and free!
• The State of HTML Survey is now opened! The more people who answer it, the more representative it is, so take a few minutes to take it! Plus, they have that awesome reading list feature now that you can use to create a custom list, including links to resources, to learn about all the new things you come across while taking it.

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

The Evolution of CSS

​

When I was at THAT Conference earlier this year, I had a chance to sit down with Tracy Lee and Rob Ocel of This Dot Labs, where we recorded an episode for their Modern Web podcast.

It was a fun conversation where we talked about the old days of the web to all the amazing things we have today, some of my favorite new things, and a lot more 🙂.

Dynamic numberings with CSS Counters

​

I did a very quick look at this in last week’s Short, and I was going to wait a bit longer to record a longer video on them, but it was so front of mind I figured I might as well do it right away.

In my Short, I was only able to look at the very basics of them. In this one, I cover those at a bit of a slower pace, but then also take a look at different ways you can use them, how you can change the types of characters, how they increment, how to have them count backwards, and more.

And the best part? Everything is super easy to do!

Remove useless keyframes from your CSS animations

​

Speaking of Shorts, this week’s one is a quick look at how you can combine or skip some keyframes.

🗓️ Mark your calendar

​

I’ll be doing a livestream this Tuesday where I’ll be creating something a bit more than a standard CSS Reset, hopefully with the help of those who are there live.

I say more than a Reset for a few reasons, which I’ll mention on the stream, but also because we’ll be going into more of a starting boilerplate with a few useful layouts and other things.

Once it’s done, I’ll share the final version, and if you can’t make it live, the replay will be up afterwards and I’ll share the link to it next week.

I’ll be starting around 12pm ET, and if you click the link above, you can get that in your local time and also set a reminder on YouTube.

🔗 Other awesome stuff around from the web

I haven’t been on the CodePen trending page for a little while, but I decided to check it earlier this week and this CSS-only, scroll-driven Doom game by Adam Kuhn was the first thing I saw, and I felt like I had to share it.

That sent me down a bit of a rabbit hole of looking at CodePens, so here’s some quick hits of fun ones I found!

• ​CSS scroll-triggered animations with style queries by Ryan Mulligan. Some delightfully snappy scroll-triggered animations using linear() on this one.
• ​View Transitions Theme Switch Showcase [Config ‘24] by Jhey. Choose the style of the transition, then switch between light and dark theme. Very cool!
• ​Animated gradient buttons with GSAP and tsParticles by John Dillian. What would a list of fun CodePens be without some fun button animations?
• ​Responsive app switcher or carousel UI with CSS view by Adam Argyle. Love the smooth animation here, and the way things stack. These types of things are just so satisfying to scroll back and forth on.

🏁

I almost wrote have yourself a great week, but as I said off the top, I’ll be back in your inbox tomorrow with a special announcement.

I stick with the one email-a-week thing because I want to respect your inboxes, but I’ve got something I’m very excited about and that I’ve never done before, so I sort of wanted to make a big deal out of it with a special Monday email 🙂.

Kevin

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