Glassy UIs, CSS Battles, and more


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

Staying sane when things get busy

show
Staying sane when things get...
May 15 · General Musings with Kev...
16:24
Spotify Logo
 

I recently went through a period that could have led to burnout, but I managed to avoid it, so I thought I'd share how I managed to get through it.

LISTEN ON: APPLE | SPOTIFY | YOUTUBE | RSS

📝 Quiz time!

Which HTML attribute is used on a button to open or close an element that has the popover attribute, without writing any JavaScript?

  1. popovercontrol
  2. popovertarget
  3. popovertoggle
  4. togglepopover

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)

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, From my experience, there are a few reasons people push back on new things, but the most common one I see revolves around people preferring the old way of doing things. This makes sense, because they are comfortable with what they are used to, rather than the new way, which is different. When something new comes along, that means they have to learn it, which for a lot of people means that it’s slower. The thing is, in...

View this email in your browser (or share it with a friend!) Hello Reader, Last week on my second channel, I asked a question near the end of the video about whether or not people are worried that, thanks to more and more people using AI to write code, there would be less pressure on languages to evolve. That led to a lot of interesting comments, with a bit of a split on people’s opinions. The two main arguments were: AI producing more and more code just builds up the training data on the...

View this email in your browser (or share it with a friend!) Hello Reader,It’s hard not to come back from an event like CSS Day and not be excited about the future of CSS, and the web in general. There is a lot to be concerned about with the current state of things, but one thing that is super clear is that there are still a lot of super passionate people who love their craft, and seeing that passion, both in the talks from other speakers as well as when chatting with attendees, you can’t...