CSS is like a fluid puzzle 🧩


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

Hello Reader,

A few weeks ago, my dad and my 10-year-old son were working on a puzzle together.

My dad mentioned that it was a pretty hard puzzle for a kid, and he was impressed with my son's patience with it (he isn’t always the most patient type 😆).

The reason I bring this up at all is because one of the reasons that I often tell people I like CSS is because it’s like a puzzle.

Just like with a real puzzle, where you do have a finished version to guide you, with CSS we have a layout that we’re trying to create.

That layout might be in a design file, or maybe even only in our head, and we’re trying to put the pieces together to make it all work.

But with an actual puzzle, the advantage is that you know exactly what the final result will be.

It’s a nice, static image.

Even 3D puzzles, which are definitely harder, have a final “state” that we aim for.

With CSS, though, we have our static image of what things should look like in our Figma file, but that isn’t what the finished page will look like.

  • The viewport size can change.
  • The user can zoom in our out.
  • They might go into a reader mode
  • Extensions might change the color scheme
  • The list goes on and on...

Things need to be fluid and adaptable… so, in a way, it’s like trying to make a puzzle where the pieces can move around and change sizes, while still all fitting together.

On top of that the design file we have isn’t the finished result that we are aiming for, but simply a guide to help point us in the right direction.

In other words, it’s really hard!

I do still see CSS as a puzzle, but one where we can’t know what the final result will ever actually be because of all the unknown variables that influence the size and scale of all the pieces we’re trying to fit together.

It almost sounds like that should make it impossible, but I think that’s what makes it the most fun!

When we use CSS to style a page or even a simple component, it’s so much more engaging than just plugging bits into a puzzle, as we also have to be aware of what might change and whether those changes might break things.

If you’re newer to CSS, the hard part is often not even being aware of everything you need to be aware of, but it’s one of those things that you learn with experience and experimentation.

And even once you know what you should be aware of, there are still little surprises that pop up from time to time.

While that can be frustrating in the moment, if it were too easy, it wouldn’t be any fun!

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

Quick accessibility wins that are easy to implement

video preview

Accessibility can be a deep topic, but there is a lot of low-hanging fruit that is easy to get right.

In this video, I look at real-life websites that are getting some of those things shockingly wrong, explore some tools to help us find the issues, and how we can avoid them in the first place.

⚡ HTML & CSS Tip of the Week

The fieldset and legend element

If you make websites—and I have to assume you at least dabble in development if you’re reading this—changes are you’ve created a <form></form> or two.

One thing not enough people use within their forms are <fieldset></fieldset> elements, which I give a quick overview in this article.

🎙️ 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

First up, if you like this newsletter, you might want to also sign up for OddNews, which is OddBird studio’s newsletter (you can sub to their RSS feed… and yes, I’m working on adding one for this newsletter too).

In their most recent issue, they link to some great stuff on their continued talks on fluid typography and anchor positioning, but if you scroll on down a bit, you’ll find a great breakdown of CSS Custom Functions, which are now experimental in Chrome Canary if you want to play around with them.

Quick links

🏁

Have a fantastic week!
Kevin

P.S. If, unlike me who has fun with the challenges of getting my layouts to behave, you get more frustrated trying to figure it all out, my course CSS Demystified might what you're looking for.

It's all about better understanding the how and why behind the way CSS works, and building up a better foundation so that you can start writing CSS with confidence.


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
CSS Hell

View this email in your browser (or share it with a friend!) Very quickly, before we get into the topics of this week's newsletter, the State of Devs survey is going to be closing shortly. The survey is for devs, but asks about who we are, rather than what we know. As with all the "State of..." surveys, the more people who take it, the more representative the results are, so if you have a few minutes, it'd be great if you could take the time to take it. Hello Reader, So, Figma had a big event...

View this email in your browser (or share it with a friend!) Hello Reader, Have you ever found yourself staring at some CSS that you were sure should work, but it wasn’t doing what you wanted? If so, welcome to the club 😂. These days, for me, it’s less about not understanding a specific behavior and more about making dumb mistakes, but there are times when it still catches me off guard as well. At this stage, most of the time I can reason my way out of the problem I’m facing, but with years...

View this email in your browser (or share it with a friend!) Hello Reader, I was going to bury this part lower down, but I think the topic of AI and it’s impact on development is very front-of-mind these days, so I’ve kept it up here at the top. Josh Comeau recently put out an article titled The Post-Developer Era. A listener on my second channel asked for more content where I share my thoughts on articles and news, and Josh's piece seemed like the perfect opportunity to try this approach!...