Hello Reader,

So, Figma had a big event this past week, and they released a no-code builder allowing you to go straight from a Figma design to a live site.

As a front-end developer, hearing that might make your heart sink a little.

There have been other tools that can do Figma → Code, but it’s a bit different when it’s a first-party feature.

On top of that, you can ask their new AI feature to add interactivity and animations!

But it quickly became apparent that there are some issues with the sites that it’s creating.

I was going to write a lot more about it, but I ended up talking about it during a live stream, and I cut that part out to make a single video out of it.

​

🤔 Your biggest CSS head scratchers

Last week, I asked people what their biggest CSS head scratchers are at the moment, and I was a little surprised by the theme that emerged:

There is some overlap between things (like debugging and scrolling, for example), and I didn’t include every answer because some were very specific.

Also, there was a question about teaching HTML & CSS, and building a curriculum. If you asked that, I’ve got an answer in the section 😊.

Since overflows and unintended scrolling are such an overwhelming theme, the first thing that comes to mind is when people are over-prescriptive with their layouts, or things within their layouts.

I realize that sometimes, there are pretty complex things at play, but a lot of the time, it comes down to either setting or removing constraints which cause these problems.

There are two ways this can cause overflows:

• If we declare a fixed size on something, it’s more likely to cause an overflow as the space around it is reduced, since it’s still taking up that fixed size. We’re setting a constraint, which then comes back to bite us.
• If we do something like width: 0 or min-width: 0, we’re removing a useful constraint that is usually in place that prevents overflows, because now an element can become smaller than the content inside of it. I talked about this more in-depth in this video a few months back.

Sometimes we want things to overflow, but we want to introduce scrollbars, and there are a few issues that can come up when we do that.

The main one is when we use overflow-x or overflow-y: scroll, the other axis is changed to overflow: auto, which can have unintended side-effects.

Dealing with those can be frustrating, and sometimes even takes a reorganization of the DOM, with a few extra divs than you’d planned on using.

Knowing both of these are such a big pain point, though, I am going to think about a bit of extra content around the topics 🙂.

🔌 Shameless plug: I’m super excited to let you know that I’m giving my first-ever in-person workshop later this year! Hosted by Smashing, they’re doing their first ever round of workshops that aren’t directly tied to a conference.

My workshop is titled The New CSS Toolkit, where we’ll be exploring modern CSS techniques that help you write cleaner, more flexible, and more robust styles.

There will be a focus on what’s practical and useful today, with some looks at some exciting features to keep on eye on as well.

It is an in-person only workshop taking place in New York City on June 24th. If you’re interested, you can get more details or register for it here.

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

5 CSS tips every dev should know

​

I had a list of some fun ideas, but none of them were really worth making an entire video over, so I made a quick hits video where I look at single-color gradients (including a few use cases for them), user-select, the all property, masks, and taking advantage of containing blocks to be able to escape scroll containers.

Can I survive CSS Hell?

​

This was the live stream that I mentioned earlier. The start is when I talk about Figma, but if you’d prefer to jump to the game, go to about ~22:30 (there are timestamps in the video).

⚡ HTML & CSS Tip of the week

This week I take a quick look at the :placeholder-shown pseudo-class, including an interactive example showing what I think is a useful use-case for it.

🎙️ Podcast Is shipping broken products the new normal? In this week's episode of General Musings, I discuss the frustrating trend of shipping broken products, with a focus on Figma Sites and their current shortcomings. I also dive into the topic of AI and the hype surrounding it, as well as the challenges faced in the gaming industry. ​ LISTEN ON: APPLE | SPOTIFY | YOUTUBE | WEB​

​

🔗 Other awesome stuff around from the web

• Josh Comeau is currently running a sale on his courses, which also includes an Open House so you can preview some of the content for free.
• Over on Piccalilli, Mat Marquis has a two part series on this in JavaScript, first with JavaScript, when is this?, followed by JavaScript, what is this.
• Sara Soueidan takes a look at whether or not CSS Carousels are accessible.
• And on the Frontend Masters blog, Chris Coyier explores shape(), a new powerful drawing syntax in CSS.

🏁

As promised, if anyone happens to teach (and I know there are a fair number who follow me who do), my first bit of advice is to try not to worry about teaching everything.

I know the reality of scope-creep and how hard it can be to not add “just one more thing”, and it always feels like so many things are essential to teach, but I’d put my focus on a very strong foundation.

Worry about the 20% of things they’ll use 80-90% of the time.

By taking that approach, there are a lot of things that you won’t cover, but if you covered that 20% well, that means the students understand the core principles, and so when they need to do something you haven’t taught them, it’s not that hard to figure out.

Even with Flexbox and Grid, both of those are big topics, but you can make a lot of layouts using them without going beyond the very basics of either one.

You can’t cover everything, so focus on the absolute most important, foundational parts (while keeping it fun, of course!), and if you do a good job, you’ve set them up for success.

I’d even say that’s more important than covering a lot of topics, as you’re also teaching them to be more independent and figure things out on their own as well.

Have a fantastic week!
Kevin

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