Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
It took me 6 years to realize I had a great idea
885 Plays11 months ago
Today is a bit of a story about how sometimes it can take a really long time to realize that you’ve actually had a really good idea. Or, well, that’s the case for me, at least. You see, I recently have become so excited about how we can use a CSS feature that I’m changing my approach to creating the core structure for websites going forward. The sort of final version of this idea I’m talking about is something that I posted about this week on my main channel, but in reality, it’s something I figured out over five years ago, and I just never realized how great it was at the time. Or rather, I realized I was onto something, and then, for reasons we’ll get to later, I stopped bothering with it and eventually totally forgot about it.
Other awesome stuff around the web:
- CSS Wrapped: 2023 on the Chrome for Developers blog
- A few ways CSS is easier to write in 2023 by Geoff Graham
What I’ve been up to this week (and other links of mine that I mentioned):
Recommended
Transcript
Introduction to General Musings Podcast
00:00:00
Speaker
Hello my friend and friends, and welcome to my podcast, General Musings. 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, as well as share interesting sites and resources that I've come across in the last week, and usually share what I've been up to as well.
The 2017 Idea Impact and CSS Grid
00:00:23
Speaker
Today is going to be a little bit of a story about how sometimes it can take a really long time to realize that you've actually had a really good idea. Or well, that's the case for me at least. Now this story begins all the way back in August of 2017 when I posted my first CSS Grid video.
00:00:42
Speaker
Grid was new back then, and it was something that I was excited about. I'd been happy with Flexbox up until that point, but I was really an early adopter on jumping onto the Grid bandwagon. I actually ended up making a handful of videos exploring different Grid features shortly after that first one, with six videos dedicated to different Grid features, and then an eight-part series where I made a portfolio website with a really large focus on using Grid throughout.
00:01:10
Speaker
And actually, since that series, I've actually created 20 more videos, specifically looking at Grid and some of its different features and different ways that we can work with it, which is a lot of videos. And of course, during all of that time, I've also used it for all sorts of things, from production websites to personal projects to quick demos that I throw together.
Early Adoption and Exploration of CSS Grid
00:01:31
Speaker
And honestly, at this point, I think I'm pretty sure that I use Grid basically every time I write CSS.
00:01:37
Speaker
But despite using it that much during these last few weeks, I realized something that in my opinion was a game changer for creating layouts. And it all started with a video that I put out a few weeks ago, which I talked about back then, so you might remember it, where I looked at using Grid as a replacement for containers and wrappers.
00:01:56
Speaker
And this definitely isn't a new idea by any means. After all, it was building off of something that Stephanie Eccles had shared over on Small CSS and an idea that Ryan Mulligan had actually blogged about over a year ago. But it was the first time that I'd really played around with this and I really loved it so much and I was getting really excited about it.
00:02:15
Speaker
Or actually, I thought it was the first time that I played around with this idea, but it actually turned out that I had thought about this way back in 2018. And I actually thought it was cool enough to make a video about all the way back then. And obviously I wasn't the only one who slept on this a little bit because that video that I put out in 2018 was my worst performing grid video with just a shade over 7,000 total views on it as I'm recording this.
00:02:40
Speaker
And over the years, I've had worse performing videos than that, but it's probably among my worst ones when it comes to like tutorials on a specific topic. And the thing is, it's basically just a less well refined version of the one that I posted a couple of weeks ago, which is thankfully doing much better than that older one. Now, the idea behind that older video, just like the newer one now, was the idea of using grid to replace containers or wrappers by using named grid lines to be able to do it.
00:03:08
Speaker
And now that I've rediscovered that video that I'd made back then, I actually vaguely remember creating it, and I even remember really liking the idea. I'd sort of fallen in love with it for a very short period of time. So why did I know about this feature, get really excited about it, and then completely forget about it? Browser support.
00:03:26
Speaker
Back in 2018, browser support for Grid was far from perfect. At the time, all of the major browser engines actually did support it. In fact, Grid was the feature that actually showed us that a big, complicated feature could get shipped by every engine within a short period of time.
Evolving CSS Grid Usage with Browser Support
00:03:43
Speaker
They actually all launched it in March of 2017.
00:03:46
Speaker
When CSS3 became a thing, it was very exciting as we got all of these new features and a lot of really cool stuff, but it also led to the horror that was vendor prefixes. And that was actually followed up by a disaster of the Flexbox rollout, which actually started in 2016 with Firefox adding support for it then. No, it wasn't complete support, but it sort of was there.
00:04:07
Speaker
2018 Safari added its partial support for it. 2010 Chrome added support for it. So that was like already four years of the browser slowly getting there. Makes me think of subgrid a little bit, but let's not get into that. But the problem there was, even though they added it, they didn't actually do it properly. It went through years of different syntaxes, vendor prefixes, and partial support for all of its features. Like FlexWrap only first gained support in 2012, and it was only fully supported by all of the browsers in 2014.
00:04:36
Speaker
which was eight years after landing in the first browser. So even subgrids looking pretty good compared to that. But yeah, Grid was the first time that the spec added a new feature and then all of the browsers implemented it quickly. Some of you might be thinking about Internet Explorer's version of Grid, knowing that wasn't 100% the best, but Microsoft was actually the pioneer behind Grid and its early prefix versions of Grid are what set the stage for everyone else to do it properly. So it gets a little bit of a pass there.
00:05:06
Speaker
But going back to our story, despite the good support for Grid in 2018, as we know once all the browser engines actually support something, it still takes a while for a feature to have good enough support to be able to use in production, and doubly so when it's something that will completely break a layout of a site if it isn't supported.
00:05:28
Speaker
So in that old original video that I did, and I'll put a link to the show notes for that one in case you're curious and you want to check it out. It's not as good production quality as my newer stuff, but if you're curious to see what my older videos were like, you can check that one out. But I looked at a solution that included a fallback that we could use that actually worked really well. So even if Grid wasn't supported, the whole thing didn't fall apart.
00:05:50
Speaker
The problem wasn't so much with that solution. It was just after my initial excitement around Grid, I calmed down on using it a little bit as I was waiting for browser support to improve with it in general. And my YouTube content actually shows this gap in my Grid usage, where after those initial six videos that I put up, plus that long series,
00:06:10
Speaker
All of those came out in 2017. I only made two grid focused videos in 2018, one of them, which is the one that I was just talking about now. And I only put out one in 2019 before I started to ramp things up a little bit more in 2020 and sort of went completely back on board in 2021.
00:06:27
Speaker
Now, even though I wasn't using it as much, I didn't completely forget how to use Grid, even as I did let it take a little bit of a backseat.
Breakthrough in Layout Design with Named Grid Lines
00:06:34
Speaker
But as support for Grid increased, I also started increasing how much I was using it. But by then, the only thing I remembered about this idea of replacing containers and wrappers with Grid is that I didn't really feel like it was worth it at the time.
00:06:48
Speaker
I didn't remember why I thought that. I just figured I probably had a good reason for going like, oh, that was something I explored. It didn't really work. I don't know, whatever. I'm not going to go back to it because why would I? I just remember it being something that I didn't really want to bother with. And I also remembered grid line names being something that I didn't particularly like because grid line numbers did what I needed to, or I could use a grid area if I wanted to name something. So I just never went back to that idea.
00:07:14
Speaker
But of course, that then does lead us all the way back to this week, where I posted a new video where I was looking at how we can use grid line names to expand on what I looked at a few weeks ago. And in that most recent video, I actually explored a few different things that we can do with them. But the part that I really liked, and to me is the biggest day to day game changer,
00:07:34
Speaker
is something I cover in the first half of the video where I assign multiple names to a single grid line and this opens up having a container that you can break out of with a pop out or a full width section as I looked at a few weeks ago but it also makes it possible to easily have things break out only to the left or only to the right.
00:07:52
Speaker
And of course, that can even be expanded on from what I looked at in the video. In my example, my breakouts either went from, you know, they were within my sort of pseudo container or they would break out all the way to the extreme left or the extreme right. But you could have different levels of breakouts as well. Just you have a pop out and then you have a pop out that's only on the left or a pop out that's only on the right. And you could have different levels of that.
00:08:15
Speaker
And yes, you could sort of do this with line numbers as well, but it's a lot clunkier and harder to use, especially if you're working in a team or something, right? Because a grid column breakout right is a lot easier to remember than declaring a grid column 3 over negative 1, which might also have to be updated within a media query or something like that. Whereas, you know, you just say breakout right, it's always going to work, it's going to go where you want it to.
00:08:39
Speaker
And so yeah, I'm really excited about this idea and I've literally slept on named grid lines for years now because, as I mentioned, using numbers was faster and grid areas is easier when you want to name something. But it turns out that named grid lines might be the most useful feature of grid, at least in my opinion and what I've been playing with it.
00:08:59
Speaker
Because not only can we replace having a container or wrapper, but we can create a much more robust system that's also really simple to use.
Recent CSS Developments and Browser Support
00:09:08
Speaker
And I'm now completely fully on board with this approach going forward. I think the funniest thing about all of this is I've been late to the party in the past, having a great idea that I'm super proud of, only to realize that someone much smarter than me figured it out years ago.
00:09:23
Speaker
But to realize that I'm the one who figured it out years ago and then didn't stick with It's a little bit different, but I'm happy that I've managed to figure it out all over again
00:09:33
Speaker
And actually circling back a little bit to the idea that Grid showed us that new features can actually roll out across all of the browser engines pretty quickly, 2023 has definitely continued to highlight that, which brings us over to our other awesome stuff from around the web section of this podcast as the Chrome for Developers blog has recently put out a fantastic wrap-up of all the things that have come to CSS in 2023.
00:09:57
Speaker
It goes over the different features, including mentioning how browser support is doing, which is surprisingly good for so many of the features that they talk about. And it also includes really nice graphics and demos and other features like that. So definitely I would recommend checking that one out. And speaking of new CSS features, Jeff Graham has posted a great article over on Smashing Magazine called A Few Ways CSS is Easier to Write in 2023 that takes a look at how a bunch of these new features make CSS easier to write.
00:10:27
Speaker
from really simple things like using the is pseudo selector thing. I don't pseudo selector function. I don't know what we call that anyway that you know colon is parentheses. You put your selectors in there to managing color schemes with color mix and a bunch of other great things that we now have at our disposal.
00:10:44
Speaker
even it sneaks in one that's not really supported yet outside of Safari which is margin trim and actually I was always thinking of margin trim only using it on the top and bottom but he showed a really cool use case of also for left and right now where it could come in handy too. I don't know what the timeline is for the other browsers on margin trim but it's one of the features that I'm actually really looking forward to so hopefully in 2024 all the browsers are on board with that one
00:11:08
Speaker
Because as much as people like to complain about CSS and browser support, it really is in a much better place today than it ever was before. And we really should be thankful for how great it is
Conclusion and Listener Engagement
00:11:19
Speaker
now. I mean, yeah, we need to wait a little while once a feature does land to be able to use it in production. But at least we have a decent idea of how long that's actually going to take now. Unlike back in the day when something like Flexbox took the better part of a decade just to be stable across all the browsers.
00:11:37
Speaker
And that's it for this week. Depending on how you're consuming this, if you'd prefer a written version, a podcast version, or a video version, the link to all of those are in the show notes, as well as links to everything else that I've mentioned along the way. 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.