profile

Hi! I'm Kevin

Glassy UIs, CSS Battles, and more

Published 2 months ago • 4 min read

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

Hello Reader,

Lots of content this week… meaning I was busier than usual and we’re skipping the general musings for this week!

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

Create this trendy blurry glass effect with CSS

video preview​

I didn’t plan for this to coincide with Apple’s new Liquid Glass UI, but I guess the timing was good! It’s not the exact same thing as what Apple’s Liquid Glass, but with the hot mess it is in terms of accessibility, that probably isn't a bad thing!

(If you’re after the full effect, check out this awesome CodePen by Mike Bespalov)

I challenged a CSS Magician to a CSS Battle!

video preview​

I challenged Julia Miocene to a CSS Battle, and was a little humbled by the experience 😅.

The State of CSS Survey (livestream replay)

video preview​

I had a fun livestream, taking most of the State of CSS survey and making quick demos of some features it mentions along the way.

If you haven’t done it yet, take it now!

⚡ Quick tips of the week

🎙️ Podcast

It's been a bit of a grind lately

Been having a hard time getting anything done the last few weeks, and as I pull out of it, I talk about some of the issues around productivity culture in general, and how sometimes it seems like we are less productive than we might have realized.

LISTEN ON: APPLE | SPOTIFY | YOUTUBE | WEB​
​

📝 Quiz time!

This will be easier for the old-school devs out there: Which CSS property do we use to ensure that an element will go under, rather than next to, a floated element?

  1. clear
  2. float
  3. overflow
  4. position

If this one was a bit too easy, we’re going to be slowly ramping up the difficulty over the next handful of weeks 🙂

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.

​

🔗 Other awesome stuff around from the web

And thanks to someone asking how to make a figure with a figcaption match the width of the image even if the text is long, I have a new trick up my sleeve to have the width of an element not impact its siblings!

That was a bit of a mouthful, but Temani Afif was the one to jump in the thread to mention using `contain: inline-size` on the figcaption, and Stephanie Eckles stepped it up a little, adding `inline-size: fit-content` on the figure itself.

🏁

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)

Conquering Responsive Layout

A free course to help you approach responsive layouts with the right mindset.

​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 →​

Advanced

Beyond CSS

An advanced course that dives into project architecture, theming, design systems, and more.

​Enroll →​
​

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.
113 Cherry St #92768, Seattle, WA 98104-2205

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, This edition of the newsletter is the last “summer break” edition. We’ll be back to the full one starting next week 🙂. 🙋♂️ What I’ve been up to this week Select a specific row in a grid, even when using auto-fit or auto-fill A fun look at how we can select a specific row when using grid’s auto-fit feature, including an example by Temani Afif, who looks at how we can do this with a lot less code in the near future. When...

1 day ago • 3 min read

View this email in your browser (or share it with a friend!) Hello Reader, The shorter summer version is still in effect, but I had several DMs and emails this week asking me about my overall approach to writing CSS, and I wanted to let you know that I do have a Frontend Mentor course where I cover exactly that. In the course, we build out a project based on a Figma design, starting from scratch. Throughout, I make a point of emphasizing my thought process on the decisions I’m making along...

8 days ago • 3 min read

View this email in your browser (or share it with a friend!) Hello Reader, A quick reminder that I’m in summer vacation mode for the next 2-3 weeks, which means these newsletters won’t have any general musings to start them off, and there will be a bit less content than usual. If you’d like to opt out of these shorter ones, you can click here to update your preferences, and I’ll only send you one again once the newsletter is back in full force. 🙋♂️ What I’ve been up to this week Spice up your...

16 days ago • 3 min read