Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Teaching Front-end, making sense of CSS, and more with Josh Comeau
612 Plays6 days ago
✅ Josh's blog: https://www.joshwcomeau.com
✅ CSS for JS devs: https://css-for-js.dev/
✅ The Joy of React: https://www.joyofreact.com/
✅ Get the bundle: https://www.joyforjs.com/
✅ Give Josh a follow: https://bsky.app/profile/joshwcomeau.com
In this conversation, Kevin and Josh Comeau delve into the intricacies of front-end development, focusing on the challenges and joys of working with CSS. They discuss the importance of teaching and learning CSS, the frustrations developers face, and the evolving landscape of web technologies, including the impact of AI.
Josh shares insights from his teaching experiences, the philosophy behind his whimsical design choices, and the significance of interactive learning. The conversation also touches on the future of animations in web development and the strategies for keeping up with rapid technological changes.
My primary YouTube channel where I teach frontend development, with a strong focus on CSS: https://youtube.com/@kevinpowell
✉ The written version of my newsletter: https://www.kevinpowell.co/newsletter
💬 Come hang out with other dev's in my Discord Community: https://discord.gg/nTYCvrK
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: https://www.patreon.com/kevinpowell
Recommended
Transcript
Introduction and Guest Welcome
00:00:00
Speaker
Hello my front-end friends, and welcome to my podcast, Journal Musings. My name is Kevin, and in this podcast I talk about whatever's front of mind for me in any given week, usually in some way that's related to front-end development, and today I'm very excited to have none other than Josh Como joining me. Thanks so much, Josh.
00:00:15
Speaker
Yeah, it's my pleasure. Thanks for having me. So I love talking to other people that teach, whether it's front-end development or CSS specifically. And you're you're one of the few that actually does do a lot of content on CSS. So I'm really glad that you've come to join me. And I'm going to sort of pick your brain a little bit about that ah today. Of course. That sounds
Josh's Teaching Journey and Blogging Passion
00:00:33
Speaker
great. Yeah. Before we get into the specifics of necessarily front-end development or, or CSS, I'm just actually curious how you got into teaching in general.
00:00:44
Speaker
Yeah, so I think my earliest real ah experience with that was in 2017, 2018, something like that. I got a part-time job teaching at a local coding bootcamp. And ah you know it was one of those things where I was working out of a co-working space, and there was a bootcamp in the same, like at the local WeWork. ah So after my workday, I would go over and just hang out for a little bit, because it's always so much fun, right? I went to a bootcamp myself back in 2014. So I would like go to their demo days and just see what people had built, and that led to me getting a job there teaching part-time.
00:01:13
Speaker
And it was super fun. it you know There's so many benefits to it. like There's the energizing aspect of like being around people who are just getting started with it, and it reminds you of your own journey with it. um But it's also super practical. like People would ask questions.
00:01:29
Speaker
that I thought I knew the answer to, like beginner basic stuff. And when you go to would you open your mouth to answer, you realize, oh, actually, I don't understand this as deeply as I thought I did. ah So it's a great way to like, you know, like take a flashlight through your own brain and find the spots ah where you don't have as concrete an understanding as you do. But yeah, so I started doing that. I also started blogging in 2014 as well. So in a way that's the, you know, if we define teaching pretty loosely, that's been where I started initially.
Why CSS Course First?
00:01:58
Speaker
But yeah, those two things together. Yeah, that your experience there of like the first time you go to explain something and then going, wait, I have no idea how to explain this. I can relate to that very much. So um yeah, it's really interesting. if As you said, like it's, I find it's.
00:02:14
Speaker
Trying to explain things is a like the absolute best way to find holes in your knowledge, just because exactly what you said, just sort of shining that flashlight. I like that analogy of of figuring out things. And I think that works. It definitely works if you're trying to explain things out loud to someone else. But I think even writing a blog post or anything, I always tell people to do that just because like exactly that reason you start trying to explain it and you go, wait a second, this doesn't doesn't click for me.
00:02:41
Speaker
Yeah, actually that was when I started the blog a big reason was just to sort of keep a collection of things like You get stuck on a problem. You can't figure it out. You spend two hours. You eventually solve the problem um and Then like three weeks later you hit the exact same problem But you don't remember the solution until you have to go through the whole friggin process and usually it's faster the second time and But it's still like I had that experience enough that I'm like, okay, from now on, when I solve one of these tricky problems, I'm going to document what I did. That way, when I hit the same thing, I can go back. So that was really the main motivation. I mean, I also liked the idea of sort of getting my name out there and building a network that way. But that was really sort of it like my early blog posts. Nobody read them. It was just for me and my own ah sort of building my own database of solutions to problems. And yet you're totally right that somebody benefits to it. Like, yeah, just
00:03:30
Speaker
It has the same effect of trying to explain something to somebody because you're having to phrase it, right? Put it into paragraphs and you run into the exact same thing of, uh, Oh, this thing that I thought I understood. You know, if you can't explain it, you probably don't understand it as well as you think you do. Yeah. Yeah, exactly. And it's, yeah, for me, ah the amount of like MDM rabbit holes I've gone down because of that. And then you actually start getting to like the real fundamentals of something and you're like, Oh, everything makes so much more sense. All of a sudden. Yeah.
00:03:58
Speaker
ah On your blog, speaking of that, you cover lots of different topics. I
Challenges JavaScript Developers Face with CSS
00:04:03
Speaker
mean, it's front-end development, but you have just you know CSS content, you have regular JavaScript, you have React content, you talk about animations, and and a whole bunch of stuff. and then so I'm actually really curious why you decided your first course to be a CSS course yeah instead of something else. yeah Well, it, I actually, I did like what I thought of as like a pretty formal process where I had like a pro con list for, cause you're right. I had like five or six things that I could have covered.
00:04:31
Speaker
And ultimately what it came down to, you like it did win out in the point system, but the thing that really made me excited about it was it was the thing I thought that, you know, give me like 10 or 15 hours of somebody's time, I could have the biggest difference. Because I worked with so many React developers, JavaScript developers, ah who really were very comfortable with JavaScript and understood HTML pretty well. But like CSS was the their Achilles heel, is that who pronounced that? yes yeah It was the thing that they kept tripping over.
00:04:57
Speaker
And, you know, CSS is a very difficult language to master, but 5, 10, 15 hours, you can get so much, you can cover so much in that ground that you can take somebody from being completely frustrated with it. It's having like a pretty reasonable understanding of it. So it just seemed like the highest return on investment I could offer, like the thing that I could deliver the most value in the least amount of time. um And once I had realized that, it was like, oh, obviously this is what I should focus on at first.
00:05:24
Speaker
Yeah, that's actually that's a really good point and definitely agree that for people that idea of the biggest return on investment. I definitely see that. That's a good way of thinking of that. I never thought like i do think that most ah developers spend so much time like when I when I talk to the boot camp, it would be like a 12 week program. Eleven weeks were focused on JavaScript.
00:05:46
Speaker
ah The first week, the day one was just sort of foundations. Day two was HTML. Day three was CSS. You have one day, or maybe two days in the entire process. ah So people don't really dedicate learning time to CSS. They pick it up as they go. And that's why so many developers have this sort of ah rickety collection of memorized snippets that they sort of deploy when they need to solve a specific problem. But of course, that causes the new problem of things don't always work the same way. Because there's all these mechanisms behind the scene that are connected in different ways that people just You never learn, so they don't know. And so that was really, it was, you know, an extra 10, 15 hours of JavaScript when they've already spent months learning JavaScript, probably isn't going to move the needle that much. Although I think that could also be fun too. ah But yeah, it was, it was just, that was it. But it seemed like the biggest gap that I could address.
00:06:33
Speaker
Yeah. Uh, I'm also curious because you're targeting JavaScript developers specifically, uh, like a lot of my audience, I do get people that are coming from other backgrounds and stuff, but a lot of my audience is just beginners to web development in general. So I think the pain points can be a little bit different from people that already know JavaScript, um, or, or a more traditional programming language. And I'm just curious what some of the main frustrations that you see people having with it are.
00:07:03
Speaker
Yeah, it's interesting. I think that like for so many JavaScript developers, like I mentioned, they just hadn't dedicated that time to learning it. um And so when you're a complete beginner, I think the benefit is that you haven't like learned a bunch of bad patterns. You don't have any bad habits yet. The thing that I see that people struggle with is like they have their memorized snippets. right like They know if they want to center something, they know position absolute, top zero, left zero, right zero, bottom zero, margin auto. right And then that doesn't work if the element doesn't have a fixed width or height, or it doesn't work if the containing block is a different element. um So I think but when you have like you know when you've been developing for five or six years, but you're still at a pretty rudimentary level with CSS, it can be hard to unlearn a lot of those patterns, or just like you know finally go beyond using memorized snippets, although I imagine it's probably pretty similar for everybody.
00:07:50
Speaker
um Yeah, and I think that the reason I chose to make the course for JavaScript developers ah partially was that I knew so many people that were in that I was kind of in that situation myself like I had started developing in like 2007 and had a very similar approach where I never spent any time learning CSS and it wasn't until 2016 something like that ah that I decided that I was sick of this relationship of like deploying my memorized snippets and then never being sure if like CSS we was going to do some wonky thing and derail my afternoon. Uh, so that was sort of my own origin to it. Um, and that was why I thought I could, I've sort of forgotten the question. What was it? Yeah, no, I i think that's basically on on what it was. It was about just like the, the main pain points that but that's people coming from JavaScript yeah have, or why, I guess also just like why they have the frustrations with it. They do. Cause there's definitely people to get very frustrated
CSS Complexity: Simple Yet Deceptive
00:08:43
Speaker
with it. Yeah.
00:08:44
Speaker
And yeah, I think that CSS ah it's deceptive, right? Like with JavaScript, you're the one writing the logic. So you, every line that you write, uh, you know, like this isn't always true. Uh, but for the most part, you're the one deciding what should happen line by line with CSS. You write like 10 characters, like display flex and all this stuff happens. Like it's so declarative, right? There's, uh, all these mechanisms behind the scenes.
00:09:08
Speaker
ah The way that I like to describe this for JavaScript developers is that you're not writing the code like you're calling the functions Like CSS gives you a bunch of these functions and you're the one deciding what the inputs are, right? So if you say with 50% Maybe you're using flexbox with display flex. So like the algorithm is flexbox and that's already baked into the browser You're not writing flexbox, but you're giving it the inputs and then it transforms those inputs into whatever layout you're trying to build and And because of that, like if you don't understand that system, those algorithms and how they ah consolidate all these properties into a layout, it can be very frustrating. ah because there's And especially, like everything is related to everything in CSS, right? like If you don't understand stacking contexts, then the Z-index property is going to be much more difficult to use
00:09:53
Speaker
uh the relationships between like parents or ancestors and descendants all these things sort of conspire uh to give you a language that's really nice to use when you understand it because you can write a little bit of code that does so much uh but if you don't understand all those things that are happening it can lead to a very frustrating experience yeah i really like that way of thinking of it of like you're just and remember exactly how you phrased it or you're just sort of putting in the inputs rather than writing everything because it's a little ah ah similar to the way I think about it but never in that that way I think that's and a nice way of of approaching it there's a really good talk by Miriam Susan that I always tell people to watch which is called why is CSS weird and it's about all like the variables that we don't control
00:10:39
Speaker
Right. So it's like, you know, you don't know the viewport size. You don't know the input device. You don't know the color range of their monitor. You don't like, we do nothing basically. It is just like, you know, and you have to write code that's going to work no matter what. And that's kind of a scary thing too. But I think it's like you said, what once you under start understanding all of those.
00:11:00
Speaker
If you start understanding how youre like all those pieces you're talking about, whether it's the containing block or just the way Flexbox is working, when you do that, what's the side effects of that happening? like You start being able to work with all within those constraints that you have instead of just trying to force things to do what you want them to do.
00:11:15
Speaker
Yeah, and that's like what I think the real tragedy of this is, is that CSS has this reputation of being ah really sort of surprising and inconsistent. But it really is like remarkably consistent. It's just that that consistency depends on a bunch of hidden variables. And once you understand it, it's such a joy to work with. So I think that's why CSS is so polarizing. Like, because most people do, most people at least in the circles that I run in,
00:11:39
Speaker
uh, really find it frustrating. Uh, but then there are also people who really enjoy writing it. And I feel like nobody's indifferent to CSS. Everybody loves it or hates it. Yeah. I definitely agree on that. That's one of my favorite things anybody ever tells me is like, when people ask me why I keep doing this, and then I always have like, there'll be a screenshot or something I can show them of like, I used to, you know, CSS was the the low light of my day. And now it's like what I look forward to. And I'm like, awesome. Like that's, that is nice. food Yeah.
The Value of Interactive Learning Content
00:12:06
Speaker
Yeah. It's always nice to get feedback like that. Yeah.
00:12:10
Speaker
I think you sort of already might have you alluded to it a bit, but just I guess wi when teaching, you you're talking about how within your course you have like the 15 hours, you can really have the big impact. Is there any specific feedback you've gotten from people or just having like worked with people and stuff?
00:12:28
Speaker
of like that one thing where you see all of a sudden things start clicking into place. like there's They go from that place of just being frustrated with it to all of a sudden understanding some of those unknown things we're talking about or or or how it works or do you just find it's a gradual process as they go through sort of Yeah, it's a good question and it's like a little bit of both like for the most part it is sort of like the the specific thing that people say like oh this really helped me understand whatever the like it's a bunch of little it's different for everybody it's like some people think that like my interactive flexbox stuff is what finally made it click but I think the one that like sort of
00:13:04
Speaker
The big mental model shift that I try to encourage people to have is to see CSS not as a collection of properties, but as a collection of layout modes. So like rather than thinking, and this is how I used to treat CSS, like you go through it property by property. like I'm going to understand how background color works, then how display works, then how flex grow works.
00:13:22
Speaker
Um, but really you should see it as like a bunch of mini languages embedded within in CSS. So you have flow layout, which is the default, and then you have flex box and grid and multi-column and all these sort of systems are, they have shared things like background color works the same in all of them. Uh, but they each decide how to implement each property. So like.
00:13:39
Speaker
The example that I use of this in the course is the width property that you think width is a pretty static thing. Like it's with 50%. Uh, but the way that works is different in flow layout and flex box writing in flow layout. If you set with 2000 pixels, you're going to get something that's 2000 pixels wide. Like it's pretty much guaranteed. Like maybe there are some cases where that's not true.
00:13:57
Speaker
But even if that means it has to like blow outside of its container, that's what it's going to do, because that's what you told it. But Flexbox takes that same property and implements it differently. So in Flexbox, you're setting what you want the size to be, right the hypothetical size, ah but then Flexbox uses that in its calculations. And if there isn't 2,000 pixels, it's going to shrink it down to fit, because Flexbox is all about flexibility. um So like that's the biggest thing that I think people bring up, is that it's not so much ah any specific understanding of CSS, it's changing how you see CSS and trying to think of it as this collection of languages.
00:14:31
Speaker
That's awesome. Yeah, that's good. I like that idea. And definitely, like you said, very true that you think this one simple thing would just work. And I guess that's also what leads to some frustration is I used with there, why is it not working the same here or whatever it is? Right. Yeah, and I think part of it, like,
00:14:47
Speaker
This is exacerbated by the nature of the web and the fact that you can never retire anything. So you can never say like, okay, you know, we're going to get rid of this old way of doing it and we're going to only have the new way because then you're going to break that website from 1997. This still has to work. um So it does feel like we keep bolting on more stuff and that leads to this sort of ah everything has exceptions and everything works slightly differently. It's for the very reasonable and good reason that you can't change anything. You can only add things. So you end up adding a bunch of stuff.
00:15:16
Speaker
Yeah, and they do seem to be more mindful of that now. I think at one point there were certain things being done where they weren't as concerned about the consistency from how it used to work. um or or you know So yeah, I'm seeing it. There's a lot more thought anyway and conversation going on before they're like, okay, this is how we're going to implement it, which is good to see.
00:15:36
Speaker
Totally. um You'd mentioned before your your interactive example with your Flexbox, and I know you know anyone who knows your blog knows probably knows it for all the interaction and everything that you build into your blog posts. And I'm curious about why are just that like when you're making your blog posts like that. like I guess you could just throw a code pen in to like show a quick example. That's what probably 99% of people do if they want to have a code snippet in there. So I'm just curious why you decided to like, no, I'm going to build out my own interactive playgrounds for everything that I'm mentioning in my posts. Yeah, it's so.
00:16:14
Speaker
When I started building my blog, this was sort of the core idea of the blog, is I wanted it to be as dynamic as any web application, where I didn't want it to be like ah a markdown document or didt want it to feel like a markdown document, where you had a collection of elements and everything was... ah Both because i I like the idea of having more control than that, like I'm a little bit of a perfectionist.
00:16:34
Speaker
ah But also because I thought it would offer the best learning experience, that I think there is ah there's so much more value in being able to tinker with something. but like I think if a picture says a thousand words, then I think like an interactive widget is like a thousand pictures. like It's the next level up from that.
00:16:50
Speaker
Um, and yeah, I guess I could have made it a bunch of CodePen embeds, but it actually seemed harder to me to do it that way because then like, you know, like I have ah a library of components now, like I have a demo component that has slider controls and radio controls. I have this whole set that I've built of little things that I can quickly assemble. And with CodePens, like each one of those would have been a separate project. And maybe there is a way in CodePen to like organize that, but I didn't know, uh,
00:17:12
Speaker
And i just you know i liked it it seemed to me like it would be nicer if it was not in an iframe, if it was integrated right into the thing. Actually, with my course platform, I take this idea even a little bit further um because there like there really isn't a strict line between like content and code. So I have fun. like In one of my lessons, I have this paragraph that talks about how like suppose you're at work and your coworker comes ah comes up to you and says, like Hi, Kevin. Can you help me with this? And Kevin is whatever the student's name is. So it's dynamically and people always message me about that. Like, Hey, is this a coincidence? Or did you actually, especially like if the person's name is John, they're like, Hey, is this a fun coincidence? Uh, you know, if their name is Abdul, it's, they're a little bit more clued into like, Oh, this is probably me. Uh, that's cool. Yeah. Um, yeah, so mentioning there, but like the, you know, you bit of a perfectionist, I do know you put a lot of.
Creating Memorable Blogs with Whimsical Details
00:18:02
Speaker
like Just out of curiosity too like when in the blog post you're creating like how long would you say like a normal post is to put together? Yeah, it really varies and it has gotten faster as I've built up the library of components ah My most popular blog blog post is the flexbox one. I think let me see if that's still true actually Yeah. Interactive Guide to Flexbox is the most popular and that one was probably like a hundred hours. Like it was quite, it was several weeks of it being my full-time thing. Uh, because it was like, there's a lot of stuff built into that. I'd say the average is like 30 ish hours. So like the better part, really what I do is I work on it like 10, 15 hours a week and it takes me two or three weeks or something like that.
00:18:39
Speaker
Awesome, yeah. um The other thing on your site is there's a lot of like little extra touches, I guess, that you don't necessarily get everywhere. ah The one that I think of all the time for when I think of your sites, the little heart thing. So it's already like, it's cute because like it looks cute as a little face on it, but then you click it and it's not just an instant heart. It sort of builds up the heart meter. So you're sort of encouraging people to spam the button and then you get the nice little animation.
00:19:06
Speaker
But I've also noticed that if you hover over it and then leave without clicking on it, it frowns for a couple seconds. And I'm just like, yeah, ah super cute. it's it's It's awesome. And I'm just like. Most people I'm guessing don't notice that detail because like not many people are going to hover and then leave. So I'm just like, I'm curious, like, do you create these things just for, you know, because you feel like it and it's going to be fun or do you think that extra touch sort of does add that extra level to a website to make it something more memorable for people?
00:19:37
Speaker
Yeah, I think both of those. I mean, it is like my philosophy when I started the blog is that I was working as full time as a developer. And I do like I really enjoy building things that are really polished and have that extra lot like, you know, thinking through details and like this. ah It's most obvious when it comes to like whimsical details like sparkles and rainbows and all that. But it's true for like any sort of UX, right? Even if you're building a banking website that has zero sparkles, you still want like the details to be thought out. um And I was sick that in my day job, there would always be sacrifices, right? There's always like we have this grand idea of what we want to do, but we only have three weeks. So like all of these nice details are getting sort of they're not making it off the shopping block.
00:20:18
Speaker
And so with my blog, that was sort of my philosophy is like, no, this is a place that if I want to spend three weeks on a detail that nobody will notice, I'm going to spend those three weeks. um And the like button was a perfect example of that. If it was, it doesn't even make sense. Like my blog, you know, like the reason like buttons exist are to inform an algorithm which author is worth promoting. I'm the only author on my blog.
00:20:39
Speaker
So it has no functional purpose I guess it does like it sort of tells me whether a post is popular or not But I have like the animal like I can tell how many people visit a blog So it's that's probably a better proxy than people deciding to click the like button Especially because the like button doesn't exist on mobile because I couldn't fit it in nicely So it's like totally not really good data um But yeah, I just thought it was fun and I do think that like little details like that do make an experience more memorable more fun like the The negative version of this that we're all familiar with is the fact that like social networks will rely on anger and ah fear and like these negative emotions to drive engagement. ah But like positive emotions do that too. and Nobody uses them, but you know if you can make something a little bit more enjoyable to use, that also creates like a stronger connection and is more memorable. um so yeah it's just it's sort of that's My whole philosophy is to make things fun and to think through the details like that.
00:21:33
Speaker
yeah Yeah, that's awesome.
Upcoming Course on Whimsical Animations
00:21:35
Speaker
um i do know you you're You're working on a new course now about whimsical animations. is it on I've seen you talk about it, but just curious about the content for that you're planning on it. Is it more of how to create the animations, or is it also involved in like you know the thought the UX side of things, of like the types of things that make good you whimsical animations, let's say, instead of just adding confetti to every page?
00:22:02
Speaker
Yeah, I want to have both. So like the the bulk of the course is going to be focused like all my courses are on implementation. So it's, you know, here's a thing, here's an actually the like button is going to be one of those examples, not exactly the same but similar. um But it's, I also do recognize that ah implementation alone like and you're exactly right that most people when they want to add details they go to NPM they grab whatever confetti library they can find and so you see it's I can I could picture it perfectly right it's circles it's completely rainbow colors they flip on themselves as they fall um we've all seen that like a million times and the problem with that is that like the whole point of these things is to be surprising. like it's It's not fun ah if it's the exact same every time. So I do think that the the design part of this is critical too. So we are going to talk about like you know tasteful ways to do this and how to make things stand out. um and Another thing that, like and this isn't so much a core part of the course as it is an idea that I want to spread more broadly,
00:23:02
Speaker
um certain things get really annoying if they happen every time. like you know If you have this animation that takes a second and a half, that's going to get really annoying for power users who have to sit through that second and a half 10 times a day. ah But the solution to that in my mind isn't to disable the animation or to not have the animation. It's to have it be time limited. right So maybe the first three times you do it, and you get the full and experience. And then you know keep track of that in local storage with a little counter. And every time after that,
00:23:32
Speaker
You do the abridged version or you skip the animation altogether, right? There's so many tricks we can do so that you still have those moments of surprise and delight, but that it doesn't then become really stale as you see it over and over again. that's Yeah, that's nice thinking on that. now because a little bit like I think the two problems are not always, like people not knowing when to implement them um and either, usually it's overdoing it. Just, there's too much going on. Everything has something and then it takes away I think from the joy and just becomes distracting. um But then like you said, if you have something that is longer that can be frustrating too. So yeah, that's that's cool. A cool idea on on keeping track of that to make it fun and then not get in the way.
00:24:15
Speaker
And it is, I mean, I struggle with this too, right? It is to find that line of like, what, what it's too much. Like how can you ah not go overboard with it? ah But yeah, I know it's, so I definitely want to cover that stuff in the course too. Cause I think that's, you know, the person that I imagine taking this course is like a developer who is building their own personal site or wants to like learn some of these tricks that they can use in their own projects. And in those cases, you don't have like an interaction designer on hand to do this for you. So yeah, it's definitely something I want to cover.
00:24:43
Speaker
Awesome. Just again, turning back to the blog in general, I'm curious like when it comes, or even if it's maybe choosing the topic for the course or anything like that, I'm just curious how you decide what topics to cover. Because I know for me, I'm very good at getting distracted by the next like, oh, that's a shiny new thing that I want to play with. So I'm just going to talk about that once I've learned a bit about it.
00:25:06
Speaker
um Do you take a similar approach or do you, you know, is it salt? I know what you said at the beginning. It's when you had specific problems you'd run into you were sort of almost documented to yourself um that these days is it similar or Yeah, not really. I do have a notion doc that is like every time I have an idea for a blog post, I add it there. And what sort of winds up happening is I'll be like walking down the street or in the shower. And I'll realize like, oh, I think of a cool way to explain something, right? Like I think of a good visualization or a good even like a good paragraph. And so that gets added to this notion doc. And once like an item in this doc has like four or five bullet points, like I can almost at that point, I can see sort of the structure of it. And that's when I take it.
00:25:47
Speaker
You know, it sort of very organically creates like a pseudo outline. we're not It's not like really an outline, but it's enough individual puzzle pieces that I can see how the whole thing will come together. So that's generally how it works, is like I might have an idea a year and a half ago, and over that year and a half, little things remind me about that, and once it reaches a certain point, it feels like, okay, this you know this idea really wants to push itself out of its brain and become real.
00:26:11
Speaker
um But there are also times, like you were saying, where there is like some new API that I'm playing with that's really fun, and it like I drop everything and go build that. um So it's a little bit of both. It's also like I try to come up, I'm gonna be starting on this animations course now, so ah most of my blogs over the next couple of years are probably gonna be animation focused, and most of my blog posts over the past year were React focused, because that was the course I was doing. Which is both, like in my mind, part of the marketing strategy, where I want the blog posts to get people excited about the course, But it's also like, that's the world I'm currently steeped in. So that's where the, you know, if I'm working on the React course and I come up with a cool concept for teaching React, I want that to be like shared more broadly. So I'll write a blog post about it too. ah So it's like lots of different ways, lots of different things like that. Yeah. And then, so with the CSS course, you already said why you decided to start with that one. Then I guess React just felt like the natural next thing. Cause that's something that you, a big part of, I guess what you do and you have that audience of JavaScript developers. so
00:27:11
Speaker
Yeah, well it's interesting actually. I had initially planned for my second course to be an animations course, but I realized pretty quickly that a lot of the animations, not all of them, but maybe like a third of them really were a lot easier to work with with React because of libraries like Framer Motion. Granted, I know like GSAP can also do a lot of really powerful things, it probably the issues that I might experience enough with that.
00:27:33
Speaker
um But I realized that like for my animations course, React would be a pretty useful prerequisite, and I should build the courses in the order that makes sense to take them. Because if I build a course that depends on React, before my React course, nobody that takes that course would then go on to take the beginner React course. um it's i mean it's That was my strategy. It turns out, as I'm actually building the animation course, that React's a pretty small part of it. So I just think it'll be useful ah without React as well.
00:27:59
Speaker
you know that's sort of the the strategy there was I knew I wanted to cover it eventually and I should do all the like foundational pieces ah in that order um and yeah it's you know I started working with react professionally in 2015 and it has been like my framework of choice um so it it did I thought I had a lot of And plus, like when I worked at the bootcamp, I developed their React curriculum. So like, I ah knew how to teach React to beginners because I had done it in person for several years. So it just, it seemed like ah something I knew I could do well that I would do eventually. So why not do it now? Cool.
Keeping Up with Web Technologies
00:28:34
Speaker
When it comes to.
00:28:37
Speaker
what we do. I'm curious because you're covering like with React, which has its changes that happen. CSS is always getting new features in it. JavaScript's evolving. ah yeah I always get asked how I keep up with everything and I have the advantage of being focused on a very specific thing And I still have trouble a little bit keeping up with everything I'm curious if you or how you do it and if you have advice for well We'll start with how you keep up with everything and then we'll follow up after that with and yeah, I mean the honest answer is I don't like I I'm definitely like I see like there's Adam Argyle
00:29:12
Speaker
on blue sky is like always like hey check out this new property that just landed in chrome canary and it's super cool uh but of course it only works if you like download the experimental browser and go into the settings and enable the like checkbox um i generally like i'm only it was six months ago that i started exploring container queries even though they've been in browsers for like two three years now um so i'm not like an early adopter by any means i sort of wait until things have a certain critical mass in terms of people are using them or browsers support them well. um And as a result, like it does sort of sometimes I think that like my job as an educator, I should be the person like sort of exploring the bleeding edge stuff so that I can then help make sure those ideas proliferate and the ah browser engineers who implement these things feel like their time was well spent. um So sometimes I do think I should keep on keep on top of things more than I do.
00:30:02
Speaker
But you're right, like I do sort of have these four areas of focus, right? I have vanilla JavaScript, React, CSS and animations and like it's impossible to be like at the bleeding edge of all these things. I would do nothing else with my time other than like follow GitHub PRs and it just seems like too much work. So I will wait until things have sort of reached a certain point.
00:30:23
Speaker
Yeah, I think as as someone who does talk, not as I'm not like Adam, like every time Adam posts something, I'm like, oh, I have more things to talk like, you know, it's it's insane the amount he's like of cool demos and stuff that he's always posting, that ah yeah the stuff that's, as you said, going to be available to us in a while. But I will say, if ever you do decide to go more bleeding edge, all it's going to result in is a lot of people complaining about browser support. So you're probably taking the better approach from a content perspective there.
00:30:51
Speaker
um And I made the mistake, like I did a video on sub grid, I think probably five years ago at this point, because as soon as Firefox had implemented it, I made a video on it. And my thinking was they, all the browsers were so fast to put grid into place.
00:31:08
Speaker
then Firefox did subgrade. I'm like, it's coming everywhere. And then it was four years later. And I'm like, oh, they still haven't done this. Okay. Nobody, eventually we got there, but um yeah, going, i I try and nowadays I either look at it as can it be used as a progressive enhancement very easily, or I wait for at least two browsers to be like, we're, we're on board with it. Cause then, you know, hopefully the, you know, it won't be too long until the features,
00:31:36
Speaker
Somewhat available you still have to wait a while what if you want to put it in production, obviously it's a bit different But yeah, well, it's it's interesting you said that about progressive enhancement because this is a thing I've noticed is I'll share a feature on Twitter that let's say her blue sky these days that has let's say like 91% browser support, but it's totally like like text wrap is a perfect example right text button text wrap balance and text wrap pretty they're lovely features and If you use a browser that doesn't support them, the text looks exactly the same as it does without it. Like, it doesn't break anything, it doesn't change the layout. And so I would share these things and people would say like, oh, I can't use it yet because it's not in browser. It's like, well, is there really any harm? Like, yeah the worst case is that it's the same as if you didn't use it. But if you use it, then 91% of your users have this nicer experience. um And so actually, I wrote a blog post a while ago that was specifically about like,
00:32:23
Speaker
given an absolute number like 91%, or 94%, or 97%, or 81. How do you then get like information from that number? like Can I use this property or not? And that was the first rule that I have, is like consider the fallback experience. And if the fallback experience is fine, then it doesn't matter what the browser support is. If it's 5%, you may as well use it if the fallback experience is fine, because it's nicer for those 5%.
00:32:46
Speaker
So yeah, you can tell that I've gotten that feedback quite a bit too. yeah yeah to the point And that's another reason that sometimes blog posts come to be is that I'm sort of sick of answering the same question over and over again, so I want to have a thing I can link people to that answers it in more detail.
00:33:01
Speaker
yeah Yeah, it's frustrating when people push back on something that's progressive enhancement. I get really, I'm so tired of that now. and The example you gave is the best one because the difference is so small one way or the other. It's like, it's better, but it really doesn't change anything. Right.
00:33:20
Speaker
Yeah, and I do get some people that are like oh it's because you know at work we have to follow this or whatever it is and I realize not everyone's in a position where you can like, or either they're not in the position to be able to like voice things or they just don't feel like they're there and maybe like people would listen to them more but they don't.
00:33:37
Speaker
They don't voice themselves more, but I'm just like I've never understood this thing where People want the website to look the same for every user and every browser But then I'm like one user can get two different experiences because if they visit on their computer and they visit on their phone That site does not look the same
Acceptance of Variability in Web Experience
00:33:55
Speaker
So why can one user have two different experiences, but two different people that are never going to talk to each other need to have the exact same website? I just don't get it. That's a really good because I've covered this in the course too. Like I even have screenshots that show how Wikipedia looks on Chrome on Windows and on Safari on Mac OS. And they're like quite different. Like even though it's the same CSS, um there is like, you know, and I even you can press a button and you flick between the two and you see that like all the text moves and although like aliasing is different.
00:34:21
Speaker
um And yeah, like there's so many, you know, uh, your accessibility settings, your color theme, your screen size, your display pixel, the number of hardware pixels, forgetting what it's called. Uh, I think it is DPR, right? Display pixel ratio. Um, there's all these things, uh, that do change and that, you know, you shouldn't want it to be identical because if you need it to be identical, it's like the lowest common denominator. Like you have to make it the worst version of what you're building. Yes.
00:34:50
Speaker
So like, you know, it's good, actually, if you have different images and if someone has a higher density monitor, they get the sharper image as a result. So yeah, it's I think I like what you said is that like, it is just, you know, if the same person can have different experiences, if like that's an accepted reality of how we develop, then why would we expect different people to have the same experience? Yeah, yeah, it's really frustrating.
AI's Role in Front-end Development
00:35:14
Speaker
uh changing gears a little bit i was a lot quite a while ago i think it's almost two years ago you did a post on artificial intelligence called the end of front-end development uh which appreciate the clickbaity title yeah so's coming from a youtuber yeah exactly yeah um The reason that you wrote it that you had posted the top just it was people sort of should I get into front-end development now or should I be focused on something else and that was two years ago and I think if I remember correctly the
00:35:49
Speaker
The point of the article is to say, we're probably going to be fine. I'm curious if your opinion has changed at all, or if you're still sort of in the same mind. It's hard to say this without sounding very smug, but if anything, I think I was more right than I realized. I feel even more strongly than I did then. In that post, there is a lot of hedging because it's true. Nobody knows how things are going to go. My assumption was that this would wind up being quite a bit like how spreadsheets were to accounting, right? When spreadsheets, like initially accounting, the whole job but was tabulating numbers because people would bring you a pile of receipts and you'd have to have like a physical spreadsheet, like a grid on a giant pad of paper and like your job was to do the math. And then spreadsheets came around and anybody could plug the numbers in and have the math be guaranteed correct and way faster and way better.
00:36:42
Speaker
um But what wound up happening is that the job of an accountant went up a step. It went to the higher level of like, okay, ah you don't need an accountant to do this anymore, but you still need an accountant for this next set of problems that are beyond the scope of what a regular person can do. um And in that blog post, I talk about how like this isn't a new idea for development. Like pre-AI, if I'm a dentist and I need a website for my dentist street practice or my bakery, you're not going to hire a front-end developer for $75,000 a year. You're going to go to Wix dot.com and you're going to grab a template that looks nice.
00:37:12
Speaker
Um, so like already we had solved for the base case of building interfaces. Um, what we haven't solved for is like, how do you build facebook dot.com or, you know, these giant, even like, that's like the one end of the extreme, but there's a whole range of things that human developers are still required to do.
00:37:29
Speaker
And the way that I see all of these large language models, and I've been using them quite a bit myself, I've been actually really impressed with how cursor works, but it still feels to me like I am the one in the driver's seat and this is a tool that's, you know, doing sort of the same thing I would do, but quite a bit faster.
00:37:45
Speaker
I also, I saw a blog post recently or a news article about how a Google CEO said that 20% of the code at Google is now AI generated. And the thing that that headline leaves out is that 100% of that code was piloted by developers, right? and No, I don't think of any company where like the the workflow is that the product manager sits with the designer and like the product manager is at the keyboard and with the help of the chatbot, they like build Uber dot.com.
00:38:15
Speaker
That doesn't seem to be what's happening. What seems to be happening is that developers have integrated this into their workflow and they can be a lot faster, which is great. like it's It's a pretty cool tool for that. um But what I've learned in my own experience is that you sort of have to be a babysitter. like You can tell the AI to do all these things and it will build them.
00:38:34
Speaker
But if you don't know what it's doing, ah you won't notice that it's being kind of curious here or there. It's doing something it like, and I feel like those miscalculations would compound on themselves. Like it's great that I'm there and I can step in and be like, oh, actually, like this API is six years old and you should use this newer one that's better. um And that will help in the next step of this, what we're going to do. And if you don't have that guidance, and I've heard people say this too, like non-developers that have been using AI is that it's great for the first 80%. But then like that last mile is always the hardest part.
00:39:03
Speaker
um So yeah, that's a very long-winded answer to say that I do think ah AI will continue to get better, and it'll reach a point where developers can be a lot more effective than they are even now, but I still struggle to see that last mile problem. Like, how do you get it so that it is so dependable that it doesn't need the the knowledgeable person sort of guiding it around its its whims and its curious decisions?
00:39:28
Speaker
Yeah, I think I when it was I think it was around when your post was coming out and people were asking me So about two years ago, I kept relating it to self-driving cars and being like we figured it out sort of then but it didn't take over like everyone said it was going to because of that the lot like that even if you get it to 99% that one last percent is the hardest Point to overcome because everything just gets like progressively harder to solve all the like to get it over that last hurdle and like right now Well back then I think we'd you know, all the low-hanging fruit was sort of what was being taken care of now It's progressing but definitely the rate of improvement is less like when I saw that post again is looking through it I'm like this sounds like you could have written it yesterday basically, and it's still like We're still sort of at that point things have definitely improved compared to what it was
00:40:18
Speaker
um And it still sort of amazes me a little bit that some, I think some of the tools are good, but like some of the implementations of AI are just so fundamentally flawed. And I'm like, nothing else would be pushed as a final product the way this is being pushed. It's kind of crazy. Right. Yeah. Yeah. I mean, it is, uh, it's simultaneously amazing and nowhere near sufficient. Like both of those things can be true, right? It is very impressive.
00:40:44
Speaker
And like in my own work, I'd say that I'm like maybe 30 to 40% faster. Especially like depending on what I'm doing. Sometimes I'm like three times as fast. right If I'm just building out the boilerplate, it's like remarkable. You give it you know the first 50 lines and it fills in the next 100 instantly and more or less the same way you would. um But then there's other times where it really struggles to sort of do what you want it to do. And I do always try to like put myself in the shoes of someone who doesn't understand this stuff. and like What would I do with this information? like how would i What would happen? I think I should do this as a test. like Just don't look at the code at all and just trust it to do what it's doing because I suspect things would go off the rails pretty quickly. yeah but yeah know it's I do think that it it will get better and better, but I still don't really see it. And this is the point of that blog post that I wrote.
00:41:30
Speaker
ah was I did hear from people who were saying, like, hey, I'm a third year computer science student. I'm considering switching to something else because it seems like by the time I finish school in a year and a half, my job, there's going to be no jobs because that's what people were saying, right? But here we are two years later. And granted, the market is tough and I don't want to take away from that. I know that it is difficult right now. I don't personally think it has much. I think it has a lot more to do with interest rates and, like, paradoxically, the fears of AI. Like, I think a lot of companies are slowing down their hiring because they too are under this impression that any day now,
00:41:59
Speaker
ah Devin AI comm or whatever it is is gonna be like, you know fire the whole team and just get one or two of these AI robots But I think like as reality settles and as people realize that oh actually this is more of a tool than a replacement um You know, these companies are doing very well financially so I wouldn't surprise me at all if in the next couple of years we do see like a Reemergence of a really good job market. That's what I'm hoping at least because it does it's been I know it has been tough out there and Yeah, I think it's also compounded with like the overhiring that went on for a little while too. So you had like, right. ever you Everything coming together to make sort of a worst case scenario for the
Podcast Conclusion and Future Plans
00:42:37
Speaker
last little bit. But hope, as you said, hopefully we start seeing a bit of a turnaround there.
00:42:42
Speaker
um Thank you for taking more of your time than I was planning to. So thank you for that. If you don't mind, I got five like really rapid fire questions. My new plan is to ask these to every guest I have, but you'll be the first one to to go through them. okay Yeah. So just CSS related first thing that sort of comes to mind for any of these. ah These are the types of questions I always get asked and don't have a good answer for. So I'm hoping that by asking a lot of other people, I can start stealing their answers basically. Okay. I'll do my best.
00:43:13
Speaker
Okay, so the first one is the thing that annoys you the most with CSS or a change you can make to it or anything like that. So it actually is coming. I saw Adam Marguile talk about this, but it's the inability to detect states, things like whether an element is stuck or not, right? Like we have them active and focus and hover, ah but any of the like, you know, in a flex box container, like has the flex wrap moved a thing onto a new line or not? Like there's so many like fluid design principles.
00:43:41
Speaker
ah that are so great like not having any breakpoints and having it all be programmatic but then you hit the case of like well actually I need to know if this case has been hit or not to apply some CSS conditionally um and I think the the scroll state that I saw Adam talk about that tells you it's like a media query but it's based on whether a sticky element is currently stuck or not so things like that I think is the biggest gap right now if like I find myself wishing it could do this thing Yeah, I'm hoping the stuck, whatever they're calling it thing is going to be able to do. Cause that's on my discord server. One of the most common questions is can I know when a flex item is wrapped or not? That comes up all the time. Right. Um, speaking of new things, I guess is, do you have a favorite new thing that you've been playing with in CSS?
00:44:25
Speaker
yeah I mean it's not super new but the thing that I've and I published a blog post about this today ah container queries I do think that they are like so much cooler than I realized they were because in my mind I thought it would be you know Solving the same problems as media queries, but with like a nicer syntax or with less indirection But what I realized is that actually no it's cool because you can have this thing respond dynamically to a media query or to Some other you know the number of items in a cell changes which changes the size of the thing It's actually like we were just talking about like it's a way to respond to things that we previously didn't have a way to respond to you And it has I find myself now that I've like I revolved my blog over the summer and I told myself I was gonna use a bunch of new CSS things and the two that really stood out were container queries and the has pseudo class those two things are like I Don't know how I got by without them now that I've gotten used to them
00:45:18
Speaker
Yeah, has is definitely about both of them. I agree 100% with you. They're they're both awesome. um So this could be one either you use it's your so it can be your favorite CSS unit and it's either because you just use it for everything or it could be it's I never use it except for this one little edge case, but I'm so happy that I have it anything like that would work.
00:45:39
Speaker
I think ah DVH and SVH, so the viewport height units that don't have that problem on iOS where the size of the window changes because the browser Chrome changes. Those two are like, you know, before that I would have to use percentage height because the VH unit didn't work on mobile or didn't.
00:45:55
Speaker
It was awkward on mobile. So you'd have to use percentage heights, but then you have to chain that 100% down from the HTML tag down. And it was, it led to so much confusion. And now it's like, Oh, I can just say like 100% or 100 SVH and it does exactly what I want. Um, yeah. And just, you know, uh, the CH unit too, I find, uh, underrated where like for my, that's why I think I use it on my blog. I might've changed it actually. I don't.
00:46:18
Speaker
I either move to it or away from it, ah but rather than set the width to be like 800 pixels or 15 rem or whatever the equivalent is, or more than that, 50 rem maybe, um you set it to be like 80 ch, and now the element will be roughly the width of 80 characters, I think at the current font size, based for that element.
00:46:36
Speaker
um Which is like, uh, you know, that's what I want, right? It's not, I don't care about the physical width. I wanted to create lines that are a certain length. So that is nice. Mind you, actually, I think I did move away from it and it was because I would have other elements. Like I have an image that I wanted to be the same size and that doesn't work, right? I guess you could make it percentage based, but it it was, I ran into issues with that. So I thought it was neat, but I, yeah.
00:47:00
Speaker
Yeah, I think dependence on the, I use it a lot too for what you were describing, but I've definitely run into that where all of a sudden the imbalance that it can create, can create depending on how you're using it can also be kind of. yeah Oh, I have to come up with a different way of doing this. Yeah. Um, is there a CSS quote unquote best practice that you secretly or strongly disagree with? Hmm.
00:47:28
Speaker
That is a good question. And I see what you're saying about questions you get asked that you don't have a good answer for. Yeah, not really. Not really. I think that it's, I can't think, I mean, the only thing that comes to mind is Tailwind has sort of become a best practice, or at least like in the JavaScript scene, it's become the de facto choice. It becomes like the thing that everyone assumes you're using. And actually, my feelings have changed. I've gotten more fond of Tailwind, at least like,
00:47:55
Speaker
Not as a user, but as a person who exists in the ecosystem. I like that there's a tool but ah people are like, it's nice to see people excited about CSS, even if they use a tool that I personally find very challenging and very frustrating to use. um yeah But yeah, that's even that, I mean, yeah, I don't have a, I'm pretty happy with how people, I'm pretty happy with the established practices with CSS.
00:48:17
Speaker
Cool. And um actually this one you already answered, so we'll leave it at four questions because it's sort of a repeat. the The last one was going to be if you could add one feature to CSS, but you sort of answered that with what annoys you the most.
00:48:32
Speaker
So yeah, with that, I just want to say thank you very much for joining me. ah Is there a best place for people to follow you? You have your blog, ah you mentioned Blue Skies or anywhere else people should follow you?
00:48:45
Speaker
I think those are the two. Yeah. So my v blog is joshwcoma.com and I am at joshwcoma.com on blue sky, which is like, I'm also on LinkedIn, but I, I'm much more active on blue sky. So that's, if if you want to chat with me, that's what you'll find me. Awesome. And if anybody is interested in your courses, where would they find those?
00:49:01
Speaker
So joshwcomo.com, there's a courses dropdown. I used to have a dedicated page for this, and I got rid of it because it I wasn't happy with it. ah But yeah, joshwcomo.com, click the courses dropdown. You'll find my two courses right now, one on CSS, one on React, and I also have a bundle that puts them together. And there are links to all three of those on the blog.
00:49:19
Speaker
Awesome. So all that will be linked down in the show notes and that's it for this week. So thank you everybody for listening to me. Thank you, Josh, for for hanging out with me. And until next time, don't forget to make your corner of the internet just a little bit more awesome. This was great. Thanks so much.