Scroll-driven animations, image resets, and the future of the web


View this email in your browser (or share it with a friend!)

PRE-S: A quick reminder that the State of CSS survey is currently open. The browser vendors all pay a lot of attention to the results of these “State of” surveys, and the more people who take them, the more representative the results are… plus they are a great way to learn about features you didn’t know about!

Hello Reader,

A bit of a short newsletter this week, as I've been focusing on getting some content created and working on my talk for CSS Day... I'm getting on the plane in a week from today!

A few weeks ago I mentioned that the panic hadn't set in yet.... it's started to set in now 😂.

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

A small update to the format of this section. General Musings (my second channel/podcast) regularly gets 20x as many views on YouTube as listens as a podcast (and closer to 400x for last week's episode!), so I'm going to put the link to the YT version here instead of the audio-only version. If you prefer the podcast version, it's not going anywhere!


📺 Scroll-driven animations without any JS

video preview

A look at how I made a subtle scroll-driven animation on the landing page for CSS Demystified.


⚡ Most image resets are missing this declaration

video preview

A quick look at why you probably should include a height: auto in your image reset.


🎙️The future of the web

video preview

A follow-up from last week, where I explore where things might go with Google deprioritizing links, and wondering if things like RSS, web rings, IRC, and other old school features are primed for a comeback.

You can get the RSS feed for the audio-only version here.

🔗 Other awesome stuff from around the web

Few less than usual, since I've been busy.

📝 Quiz time!

When using animation-timeline: view() to create a scroll-driven animation, what happens if you don’t specify animation-range?

  1. Animation plays from when the element enters the viewport until it exits
  2. Animation plays only when the element is 50% visible
  3. Animation plays only when the element is fully in the viewport
  4. Animation doesn’t work

As per usual, you'll have to head on over to YouTube to take a stab at the quiz, and once you answer, you'll see if you were right or not.

Have a fantastic week!
Kevin


Are you looking to step up your CSS? I've got both free and premium courses to help with that! They cover a range of skill levels too 👇

Beginner friendly (and free)

HTML & CSS for Absolute Beginners

A free course that starts with the absolute basics, and gets to creating some layouts with Flexbox and Grid.

Enroll →

Intermediate

CSS Demystified

For those who've been writing CSS for a little bit now, but want to step up their game and start writing CSS with confidence!

Enroll →

Intermediate (Frontend Masters)

Build a Modern Site from Scratch

Build a fully responsive site using modern CSS features, along with some polished animations.

Enroll → (25% off first month of Frontend Masters if you use this affiliate link)

If you no longer want to get any emails from me, you can unsubscribe or you can edit your preferences if you'd like pick which emails you get from me.
600 1st Ave, Ste 330 PMB 92768, Seattle, WA 98104-2246

Hi! I'm Kevin

Weekly newsletter, where I talk about tangentially-related front-end development topics and share what I've been up to in the last week, plus any cool/fun/interesting/useful links I come across as well.

Read more from Hi! I'm Kevin

View this email in your browser (or share it with a friend!) Hello Reader, More and more people I deeply respect and have learned a lot from over the years feel like they are speaking into a void, to the point where they are losing motivation to continue making content. And I know it’s not only people making content, either. While some people are embracing the changes, many feel things have changed and that their jobs are no longer what they signed up for, leading them to lose the passion for...

View this email in your browser (or share it with a friend!) Hello Reader, Earlier this week, I posted this on Bluesky. I’m not panicking about the talk itself right now, but as I’ve spent time working on my talk this week, imposter syndrome has hit hard. I know for a lot of people, and especially with newer developers, I’m either the person or one of a handful of people they think of when they think of CSS, so it might seem a little crazy for me to be having imposter syndrome, but boy is it...

View this email in your browser (or share it with a friend!) Hello Reader, In the last three days, I’ve created more content than I usually do in one week (and no, don’t worry, I’m not about to try and sell you some productivity system 😆). As I sat down to write this, I wondered what I had done differently to get so much done, and at least some of it was due to a small tweak I made to my workflow on Monday. I won’t bore you with the details, but I want to talk about the idea of removing...