Hello Reader,
Ask any front-end developer what the easiest language is between HTML, CSS, and JS, and everyone is going to say HTML, right?
It’s funny though, because most of the things I hem and haw over the longest are often related to how to mark something up in my HTML.
Semantic HTML is great, but some times are, well, hard to define!
As an example of that, I posted this question on Twitter and Mastodon about how to markup a “simple” card, and more specifically how to approach the small text before the header, and the header itself.
And, there were a lot of different answers!
While the idea of semantic HTML is great, the problem is some things aren't easy to define! Like, is the small text over the heading a category, a subtitle, maybe both? 🤷
Part of the issue was that I didn’t give a ton of context in terms of the larger design of the site, but the other issue was, often, finding the right semantics can be hard, and it’s often not as straight-forward as we’d like.
If you have any thoughts on the matter, I’ve started a discussion on my Discord about this as well, where you can join in the discussion.
🙋♂️ What I’ve been up to this week
The podcast is back!
I probably won’t post this here every week, but since I took a bit of a break from it, I figured I’d post about it here.
I have changed the format a little, and it’s no longer using this newsletter as it’s script, so the content isn’t repeated… though the main topic is the same, as, in this week's episode, I go into a lot more detail about the difficulties of semantic HTML.
If you'd like to subscribe to the podcast, that link above has a subscribe button which brings up links to it in all the major platforms, plus the RSS feed.
How to take control of Flex
Flexbox is one of those things that’s easy to get started with, but suddenly gets a lot more annoying when you try to get more consistency from it.
Granted, Grid is probably the right choice when you need that consistency, but understanding how to harness flexbox by using flex-grow, flex-shrink, and flex-basis effectively is still very useful!
Dynmaic horizontal scrolling based on the amount of content
Horizontal scrolling is becoming more common these days, specially with how it’s relatively use-friendly on touch devices.
But, what if you only want to add the scrolling when you want an element to be able to grow in height to accomodate more content, but only up to a certain point, and then introduce the scrolling?
That’s exactly the problem someone in the Discord community was struggling with, and I made a video reply to them which I thought could benefit my entire audience, so I turned it into this YouTube video 🙂.
🔗 Other awesome stuff around from the web
After Chris Coyier shared his thoughts on the apparent death of CSS-Tricks about a month ago, it seems to have caused enough waves for Digital Ocean to start reviving the site, and the first post in almost a year was put up this past week.
Geoff Graham, who was the technical editor at CSS-Tricks until Digital Ocean decided to stop bothering with the site (he has also been doing behind the scenes work with me for the past few months) shared his thoughts on it coming back to life, and that his old role is now up as a job posting.
Creating color palettes with the CSS color-mix() function
Michelle Barker, who you might know from CSS In Real Life recently wrote this great breakdown of color-mix() over on the MDN blog.
It breaks down how color-mix() works, and then dives into creating lighter and darker, as well as warmer and cooler variants based all on a single color.
CSS color-scheme-dependent colors with light-dark()
Speaking of color stuff in CSS, light-dark() just shipped in Chrome. I’m excited about that, because it’s already supported in Firefox, and is in the Technical Preview of Safari, meaning all browsers will have it very soon.
If you’re creating a light and dark mode for your site, this will make life a lot easier, as you can define both the light and dark values in a single declaration.
Bramus does a great job of explaining it in this article, and Adam Argyle shared this tweet that looks at how it can simplify our code.
Css for printing to paper
I get asked about this more often than you might imagine, but print styles are something I have very little experience with, so I haven’t made any content on them.
Luckily, now, I at least have a great resource that I can send people to, with this great breakdown.
🏁
Have yourself a great week,
Kevin
