It took me 6 years to realize I had a great idea

Key Takeaways

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 mine 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 today is going to be a little bit of a story about how sometimes it can take a really long time to realize the you've actually had a really good idea or well that's the case for me at least now the Story begins all the way back in August of 2017 when I posted my first CSS grid video 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 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 together and honestly at this point I think I'm pretty sure that I use grid basically every time I write CSS but despite using it that much during these last few weeks I realized something that in my opinion was a game Cher 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 and this definitely isn't a new idea by any means after all it was building off of something that Stephanie Eckles 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 I loved it so much and I was getting really excited about it 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 who slept on this a little bit cuz 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 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 and now that I've rediscovered that video that I'd made back then I actually vaguely remember creating it uh 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 back in 2018 browser support for grid was far from perfect at the time all of the major browser engines actually did support it uh 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 they actually all launched it in March of 2017 when CSS 3 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 flex box roll out which actually started in 2016 with Firefox adding support for it then no it wasn't complete support but it sort of was there uh 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 um 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 Flex WP only first gained support in 2012 and it was only fully supported by all of the browsers in 2014 which was 8 years after landing in the first browser so even sub Grid's 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 version of grid knowing that wasn't 100% the best but Microsoft was actually the Pioneer behind grid and it's early prefixed 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 but going back to our story sorry for the little Sidetrack there 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 like which would happen with grid 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 not as good production quality as my newer stuff but if you're 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 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 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 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 back seat 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 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 cuz I 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 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 Cher is something I cover in the first half of the video where I sign 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 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 can have a pop out that's only on the left or a pop out that's only on the right and you can have different levels of that 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 cuz a grid column breakout right is a lot easier to remember than declaring a grid column 3 over1 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 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 all right 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 and I'm now completely fully on board with this approach going forward uh I I think the funniest thing about all of this is like 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 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 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 wrapup of all the things that have come to CSS in 2023 it goes over the different Fe features including mentioning how browser support is doing which is surprisingly good for so many of the features that they 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 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 uh even 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 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 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 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