Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Don't rely on this non-existent optimization
828 Plays11 months ago
A recent video of mine has made me realize that a lot of people don’t realize that cross-site caching isn’t a thing anymore, so in this episode, I talk about that, as well as how we do still need to optimize things, how great CSS is becoming, and more.
Other awesome stuff around the web:
What I’ve been up to this week:
- Two better alternatives to overflow: hidden
- True parallax with CSS
- These font stacks will improve your site’s performance
Find me elsewhere on the web:
Recommended
Transcript
Introduction to General Musings Podcast
00:00:00
Speaker
Hello my friend and friends and welcome to my podcast General Musings.
Focus on Frontend Development and CSS
00:00:05
Speaker
My name is Kevin and this podcast is the audio version of my weekly Sunday newsletter where I talk about whatever is front of mind for me in any given week, usually in some way that's related to front-end development and often specifically related to CSS, as well as share interesting sites and resources that I've come across in the last week and of course share what I've been up to as well.
System Fonts and Performance Debate
00:00:27
Speaker
This week I want to start things off by talking about one of the videos that I put out on my main channel because it's actually led to some interesting takes in the comment section. The video is called These Font Stacks Will Improve Your Site's Performance and in that video I recommend people actually use system fonts when possible and I share a link to a resource where you can find font stacks that are using system fonts that actually look pretty good.
00:00:52
Speaker
This is one of those videos that I enjoy the comments section of because it leads to a lot of different opinions and interesting discussions. And in this case, it ranged a pretty big spectrum as I had people saying there's no need to optimize for performance or speed for things like fonts because everyone's on 5G anyway.
Misconceptions About Cross-Site Caching
00:01:09
Speaker
By the way, not everyone is on 5G, but we'll get to that later. But then, of course, there's people on the other end saying that they loved this idea so much that they were actually going to go and change the font stacks they were using on their current projects.
00:01:22
Speaker
The reason I wanted to lead off talking about this though, rather than some other random general musings as I usually do, is that there was actually a common misconception that came up over and over again in the comments section. I think one of the reasons that this is such a common misconception is because things actually used to work this other way.
00:01:40
Speaker
that we're going to talk about in a second. So I think people just assume that it still works that way because either that's what they've always known or they've read old articles or documents that talk about that. And what that is, is dealing with cross-site caching, which is actually something that we don't have anymore.
00:01:57
Speaker
If you don't know what that is, cross-site caching was when someone would download, say, a Google font like Roboto, or maybe even something like jQuery from one site, and as long as that was hosted on a CDN, then it would be cached on their computer. So if they visited another site that used those and it was coming from the same CDN, they wouldn't have to download those files again.
00:02:18
Speaker
The thing is, cross-site caching stopped being a thing over four years ago in Chrome and Firefox, and in the case of Safari, it's actually been more than a decade that they've stopped supporting it.
Optimizing for Slow Internet Users
00:02:29
Speaker
It's mostly for tracking privacy reasons that the browsers have stopped doing it, and if you'd like to read more about it, including some of the history behind it and everything, there's a really good article by Stefan Judas that dives deeper into it all that I'll include in the show notes.
00:02:43
Speaker
And one really important thing that came up from all this is I didn't realize that so many people were unaware that this wasn't a thing. So I figured by leading off this podcast, by talking about it, at least I'd help a few more people realize that they might think that they're taking advantage of a type of optimization that doesn't actually exist anymore.
00:03:02
Speaker
Now quickly circling back to the everyone has fast internet thing, I've been in some places with shoddy connections all too frequently. This actually just happened to me when I was at my son's Christmas concert in their gymnasium. The connection was terrible. Now I shouldn't be on my phone and of course I wasn't while they were.
00:03:18
Speaker
singing their songs and all of that but when we were waiting to get set up I went to go browse the internet and I was like oh my goodness this is slow and the connection was just terrible and of course I've seen this in other places like those warehouse stores like Costco or Home Depot where I guess because it's a big metal building the internet connections can just be terrible.
00:03:35
Speaker
Also, if you're underground for public transport or something or shopping centers, I've seen that as well, not to mention if you're traveling or just living in areas that don't have the best connections. And on top of that, there's also a lot of people that are on questionable public Wi-Fi. And these people rely on that Wi-Fi a lot of the time because they don't have big data plans or whatever it is. And while public Wi-Fi has had big improvements over the years, it still often isn't as fast as the regular Internet that you might be used to.
00:04:05
Speaker
We can't just assume that everyone has a perfect connection or a high-end flagship device, even if that's all you see inside of your bubble, because it's simply not reality.
Audience Preferences: Long-form vs. Short-form Content
00:04:16
Speaker
So while I completely agree that sometimes when we're optimizing things, we can really go off like the deep end into these minor optimizations that probably aren't making any differences, but a lot of the time there are a lot of optimizations that we can make that really do improve the user experience
00:04:31
Speaker
And just don't forget that not everyone is running on a wired connection or a really good connection on really good devices because for the people that aren't on them, you might be absolutely destroying the experience and they're just not going to stick around on your site. Now changing gears a little bit, if you follow me, you probably know that I post both long form and shorts. The thing is, you probably either watch only my long form or only my shorts. And I'm guessing if you're listening to this, you're probably in the long form camp.
Modern CSS Capabilities and Techniques
00:04:58
Speaker
Now 100% there are some people listening to this that do consume both types of content, but the reason that I feel pretty safe in assuming that the large majority of you don't is because, at least according to my YouTube analytics, in the last 28 days, 48% of my audience has only watched my long form content, 33% has only watched my shorts, and 19% has actually watched both of them. And while that's only for the last 28 days, those numbers are pretty consistent if I look back further in the data.
00:05:26
Speaker
This is one of the reasons that I often make shorts on the same topics as my long form content, but just any much more condensed form like I did this past week where I did a short on a CSS only parallax effect, which is something that I covered a few weeks back in long form.
00:05:41
Speaker
And because I know how the analytics break down, I'm not too concerned about people having already seen the longer video. And well, I also put out a lot of content and it's a lot easier to do it this way as well. But another reason I actually wanted to bring this up is one of the cool things with that video, or those videos I guess I should say, is how I've actually been able to make quite a few CSS only type videos of late without having to talk about strange CSS hacks.
00:06:06
Speaker
It used to be that CSS only meant here's a hacky way to accomplish something that probably is inaccessible and has a bunch of problems or is a lot more work than the JavaScript included version would be, but no longer.
CSS Overflow Clip vs. Overflow Hidden
00:06:18
Speaker
We're getting into places like where scroll-based animations can actually be easier and better to do with CSS rather than relying on JavaScript for it, and it's really, really exciting.
00:06:28
Speaker
And speaking of newer features, one that hasn't got much attention but which is extremely useful is one that I talked about in my other video this week which was overflow clip. Sometimes we have overflowing content, it happens, and we need to use an overflow hidden, but it actually has a few side effects that, well...
00:06:45
Speaker
Suck, really. For example, if we use overflow hidden only on one axis, the other axis might suddenly get scroll bars, which we really don't want it to have. It can also prevent position sticky from working, and it can even introduce double scroll bars to your entire page, which is actually something that happened to me once and drove me absolutely crazy.
00:07:04
Speaker
And despite spending like way more time than I'd like to admit trying to debug that one, I still don't understand why it actually causes that double scroll bar to happen. But I'm glad I know it can cause it. So if ever it does come up, I know how to solve it, which is just don't use the overflow the way I was using it.
00:07:21
Speaker
But luckily we have a few alternatives now, one of them, the clip that I just mentioned. And they're much, much better. The clip is basically just a better version of Overflow Hidden. Just Overflow Clip and it does what you want it to. And there is another one which I mentioned in that video, which is Contain Paint, which is definitely a little bit different. But with the Overflow Clip,
00:07:42
Speaker
It's like overflow hidden, but without the annoying side effects. We can do it on only one axis and the other axis we can just keep visible the way we actually want it to do, which is really, really amazing. And it even comes with an extra property called overflow clip margin, which lets us control how much things overflow by. Now overflow clip itself has a shade over 90% browser support right now.
00:08:05
Speaker
So it's not perfect, but that extra margin property that we have is currently buggy in Chrome and it's not supported at all in Safari yet. But at least it's something that we can sort of look forward to on that video. Actually, some people in the comments did mention a good use cases that we still have for overflow hidden though, which include if you need things to scroll using JavaScript.
00:08:25
Speaker
So, you know, you're linking some sort of animation to the scroll or something like that and you're hiding things. You have to use an overflow hidden then clip would actually just it sort of basically makes that content that's outside or that is overflowing not exist sort of as far as the browser is concerned.
Hanging Punctuation in CSS
00:08:40
Speaker
And the other time that it can be useful is if you need a text overflow ellipsis. In that case, you still need to use your hidden. So there's still going to be times that you will need to use the hidden, but I think it's now going to be starting to become one of those more niche tools that we use in specific use cases, whereas clip becomes more of the default that we use most of the time.
00:09:00
Speaker
Now moving on, I have two articles to share with you as we move into the other awesome stuff from around the web section of this podcast. The first one is something from Chris Coyer, who I haven't linked to in a while, but he's often someone that I link to in this section. And somehow I missed one of his recent posts from a few weeks ago, where he looked at hanging punctuation, which is a property we have in CSS. If you've ever looked at a magazine or a book and there is an opening quotation, the quotes will actually sort of hang off the left side a little bit of the text.
00:09:30
Speaker
trying to explain it like this without any visuals makes it probably sound like it would be a little bit strange but trust me it looks really good and it's much better than the alternative where the quotation mark is lined up with the text because then it sort of leaves this empty space underneath anyway you'll have to see it so check the show notes for for that because he does include a few examples
00:09:50
Speaker
of that one and actually one of the reasons I'm excited about this and I wanted to share it is because back in school I was a bit of a typography nerd so this type of thing being in CSS actually gets me kind of excited and I didn't actually realize this about it though and for some reason I haven't heard too much about it but it's actually been supported by Safari since 2016 and it's still the only browser that supports it
00:10:15
Speaker
Safari often leads the way when it comes to typography related things. I guess there's some typography nerds that work over there as well and they often care about aesthetics. They're the first ones that have been pushing a lot of the new color spec as well. And I guess in this case it's not really one of those pressing matters or anything like that.
HTML Behavior and Separation Debate
00:10:31
Speaker
But it would really be nice to see this gain some wider support.
00:10:34
Speaker
And moving into a completely different direction for the next article that I'm going to be sharing in the show notes is if you have time for a longer read, Alex Petros recently put out an article called, The Behavior Belongs in the HTML, which dives deep into the idea of tying more behavior into the HTML itself, as you might guess from the title of that article. And actually, I think he raises some really good points along the way with this one, which is why I'm sharing it.
00:10:59
Speaker
And he actually opens the article by questioning why using an inline on click listener on a button is considered bad practice. You know, we always talk about separation of concerns and the HTML should be the content. The CSS is the styling. JavaScript is the functionality. And he sort of argues that maybe that shouldn't be the case.
00:11:15
Speaker
And you might have thoughts on this and strongly disagree with what he's saying or maybe you're just intrigued. But definitely whatever the case is, if you do have the time, I'd strongly suggest that you do give it a read because he raises some pretty interesting points along the
Episode Wrap-Up and Future Content Announcements
00:11:29
Speaker
way.
00:11:29
Speaker
And that is it for this week, but a quick heads up before I let you go that next week's episode will probably be a pretty short one as the holiday season will have fully descended on us by then. And also the first episode that's going to be coming out in January will be a little bit different as it's going to be my year in review as well as what's planned for 2024 episode. Thank you so much for listening. And until next time, don't forget to make your corner of the internet just a little bit more awesome.