Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
How people's struggles with CSS evolve over time
956 Plays1 year ago
This week, I’m going to be talking about the results of the survey I ran last week asking about people’s primary pain point with CSS and exploring if we can find any correlation between years of experience and specific pain points—spoiler alert, we can!—as well as sharing a few of my favorite resources that I use to keep up with CSS.
Other awesome stuff around the web:
- Stephanie’s newsletter
- CSS weekly newsletter
- Ryan Mulligan’s Layou Breakouts with CSS Grid
- Breakout of the container snippet by Stephanie Eckles
What I’ve been up to this week:
Find me elsewhere on the web:
Recommended
Transcript
Introduction & Podcast Insights
00:00:00
Speaker
Hello my front-end 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 of course share what I've been up to in the last week as well.
00:00:26
Speaker
This week, I'm going to be talking about the results of this survey that I ran last week asking about people's primary pain point with CSS. In the survey I sent out, I had almost 1,600 responses as I recorded this, and of those responses, most of you seemed to really like CSS, but there were 21 of you who absolutely hate it, only giving it a 1 out of 5.
00:00:53
Speaker
Most people gave it a 4 with 49.3% of the votes and about 22% each for the 3s and 5s. So generally people really do seem to like it. Now because of the type of content that I make, which is all about CSS and sharing this with my audience,
00:01:10
Speaker
I figured the results would be more skewed towards people liking it than not liking it, so I am glad that most of you do actually enjoy it. And it does make me wonder though what CSS did to hurt those 21 people badly enough to give it a 1 though.
CSS Survey Insights
00:01:25
Speaker
but hopefully for those of you who rated it a 1 or a 2 I can change your minds about it over time. But what I was most interested in when I was doing this poll was to see if there was any correlation between the specific pain points and the years of experience that people had and actually it turns out that there is.
00:01:43
Speaker
Now, since I'm not a spreadsheet expert or a data scientist, I'm also not 100% sure how strong this correlation is, but I think there are a few things that we can draw from this. Being that people with less experience tend to have more issues with things like responsiveness, which had the second most votes, but also the lowest average level of experience.
00:02:06
Speaker
And then those that had more experience were more frustrated with things like browser support and project maintenance, with browser support getting the most votes out of anything and those votes coming from a high average years of experience.
00:02:21
Speaker
And to me this makes a lot of sense, with newer people still trying to wrap their minds around how to make layouts and especially adapt to widths and with breakpoints in media queries and things like that. Whereas experienced people are more able to look at all the fancy new features that are coming out and wishing they could actually use them, only to be sad when they realize that browser support is under 80 or 90%.
00:02:46
Speaker
but there were a few surprises in the results as well. One of them was animations and transitions which got more votes than I would have thought they would have, along with debugging. So those are things that I'm gonna have to give a little bit more thought to and maybe dive deeper into another time.
00:03:03
Speaker
And another one of the ones that surprised me is the too many ways to do one thing and not that I was expecting this to get a lot of votes but what surprised me about it is it had a bit of a higher experience level on average than I expected it to have. I really thought this would be more of a beginner problem but it's sort of a middle of the road when it comes to average experience level and as I said it had a lot of votes.
00:03:29
Speaker
But that might simply be one of those, the more you learn, the more you realize how much you don't know things going on. I'm also shocked that Overflow had almost as many votes as naming. It makes me wonder what type of problems people are running into with Overflow, and now that I'm saying this out loud, it might also line up a little bit with the debugging thing because debugging Overflow is one of those harder things to actually
Validating Course Focus
00:03:55
Speaker
do.
00:03:55
Speaker
As for how I'm going to use all of this information right now, I'm not entirely sure, but in a way it does validate some of the decisions I've made along the way regarding my courses. One of my most beginner-friendly courses is my free course Conquering Responsive Layouts and my most advanced course Beyond CSS focuses a lot on project maintenance and architecture, so I think I've positioned those really well.
00:04:20
Speaker
but I do plan to look a little bit more at these results and see if I can get any other insights out of them and maybe even I might run a few extra polls on specific topics going forward to dive into some of the issues people are having in more detail. This was just sort of a broad overview of the main pinpoint so maybe we could dive deeper into individual ones going forward. Now as for this survey, if you'd like to dive into them yourself, I've linked to the spreadsheet of the results in the description.
00:04:48
Speaker
So if you want to play around with it, by all means see what information you can gather out of it. You probably get some better stuff than I can. You'll just have to make a copy of it. It's a regular Google Sheet. You can do whatever you want with it. Now shifting gears a little bit as we move into the other awesome stuff from around the web section, though I guess it's still actually related to browser support or the browser support.
Keeping Up with CSS Updates
00:05:09
Speaker
pain point is I'm often asked about how I keep up with CSS, especially with all of the new features that are coming out at such a breakneck speed these days. And there's a few different things I do, like reading the changelog whenever a new browser version drops, especially the Firefox Nightly, Chrome Canary, and Safari technical preview ones.
00:05:30
Speaker
since new things get added to those before they hit the production browsers, so I know what's in the pipeline. But knowing what's in the pipeline is different from being able to figure out how these different things and these new features work though. So if you like keeping up with the state of CSS, I'd strongly recommend two newsletters, which are Stephanie Eccles' Modern CSS newsletter, as well as the CSS Weekly newsletter.
00:05:53
Speaker
Both of them are like bigger versions of this section of the podcast where it's just sharing tons of awesome resources, articles, and tutorials. And there are some of the few newsletters that I subscribe to and they're often a source of inspiration for my own content. And speaking of my own content, as usual I did put out a few videos on YouTube this week
00:06:13
Speaker
And I was also on another podcast, and I guess we'll start with that other podcast first, where I was a guest on the Web Perspectives podcast, where I chatted with Sean and Mike and we just basically nerded out about CSS for an hour and a half, talking about the growth of CSS as a language, my perspective on frameworks and CSS and JS and keeping up with everything, and a whole bunch of other stuff as well.
00:06:39
Speaker
It was a ton of fun to be on the show and if you're into podcasts and you are listening to one right now and you like hearing me talk about CSS, then I'd suggest checking it out. As you might assume, the link is in the description. But then, of course, in terms of my own content that I created, this week's two videos were a little bit different because both of them were ones where I explored unconventional approaches to common things we write in CSS.
Exploring New CSS Methods
00:07:07
Speaker
First up, I looked at a potential new image reset that we could use after coming across a post by Harry Roberts where I initially thought that he was trolling us a little bit by suggesting we use things like font style, italic, and background size on our images, but it turns out there's actually good use cases for them.
00:07:28
Speaker
The italic text is for if an image is broken for some reason, it'll render the alt text in italic to help set it apart from the regular text. And the background size goes with part of a solution he has for having a low res placeholder. And I don't think most people will use all of the ideas that Harry mentions and all of these different things that I go over in the video
00:07:51
Speaker
But I think it raises interesting ideas about setting default values for just in case scenarios, which is something I've never really thought too much about in the past, but that I think is actually sort of an interesting thing that we can implement into our CSS at times.
00:08:08
Speaker
Now the other video that I took a look at where as I said it was looking at something a little bit different, it was exploring how we can use Grid to create a pseudo container which was actually inspired by a CSS snippet that Stephanie Eccles shared on small CSS which is one of her many sites.
00:08:26
Speaker
And it's a lot more work to set up than a simple max width with a margin zero auto that you'd normally see on a container or wrapper, but it makes it really easy to have sections that can break out of the main grid so we can have a call to action or an image that's wider than the main content. And that's sort of the idea that Stephanie had in her post and I love that idea.
00:08:48
Speaker
But then the more I thought about it, I was thinking about how we might be able to take that a step further and go full width as well, but keep the content in the full width section within the original pseudo container thing that we were creating in the first place.
Community Reactions & Podcast Growth
00:09:03
Speaker
And it actually worked great.
00:09:05
Speaker
And what I really loved about it is we can set up this main content grid and just place our content in there and it lines up the way you'd expect it to with a container, but without having to add that container class in there. But then if I want a full width section, I make a section inside of that same area and I give it a background color and a class of full width and voila.
00:09:27
Speaker
I'm done I don't need to do like close off a container then make a new section then inside of that section add a new container or wrapper inside of there and then put my content and then close that and I make my section I put full width on it and it just works now
00:09:42
Speaker
I'm positive that some people will love this idea whereas others will hate it and actually as I say this I know this is a bit of the response based on the replies on my YouTube video about this and I did propose it in the video about like what do you think about this? Is this over engineering a
00:09:59
Speaker
problem that we don't really need to worry about? Or is this something that you'd actually want to implement? And there were definitely some people saying like, you're solving a problem that doesn't exist. But there was a lot of people and definitely the majority of people that do actually seem to think this is a pretty cool idea. So I think that's really awesome. And it's something that I definitely need to play around with more, but I'm really excited to do that and to explore it a bit more and see if it's some
00:10:25
Speaker
you know, maybe a new way of working or a better way of working. But really, I just like the discussion on ideas that this type of thing can start and how more ideas can sometimes spawn based on these ideas, just like I took Stephanie's idea and I sort of expanded on a little bit of what I saw from there. And then actually from that, I later found out that Ryan Mulligan had done a post as well where he was exploring this idea like a year ago
00:10:51
Speaker
but instead of just having a breakout and a full width he had like a breakout and a featured section and I think something else and then the full width so it's not something that's sort of limited right you can you can do a lot with it and I think it's a really fun idea and just the discussions that are going on in the comments of that video and the Twitter replies and other stuff I think it's
00:11:10
Speaker
You know, these these types of things are really fun to explore. And I've seen a lot of people that think it's worth adopting, which I think is kind of cool. And with that, that is it for this week. If you enjoyed this podcast, in case you're watching this on YouTube, there is a podcast version of it available, too. And speaking of the podcast version, this podcast is still fairly new and I'd really appreciate it if you could rate and review it as apparently that is a big signal for the podcast distributors out there.
00:11:40
Speaker
If you did stumble across this and would prefer a written version of it, the link to my newsletter is in the description 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.