Josh Comeau - Creating Delightful Developer Education

{/ TAB: SHOW NOTES /} This week we talk to Josh Comeau, a developer and educator who has created a series of interactive courses on CSS, React, and JavaScript. His courses are lauded for their interactive nature and his ability to explain complex concepts in a way that is both easy to understand and fun to learn. Join us as we discuss his journey from a developer to an educator, and his new course on animations and interactions. - https://www.joshwcomeau.com/ - https://css-for-js.dev/ - https://www.joyofreact.com/ - https://whimsy.joshwcomeau.com/ Become a paid subscriber our patreon, spotify, or apple podcasts for the ad-free episode. - https://www.patreon.com/devtoolsfm - https://podcasters.spotify.com/pod/show/devtoolsfm/subscribe - https://podcasts.apple.com/us/podcast/devtools-fm/id1566647758 - https://www.youtube.com/@devtoolsfm/membership {/ LINKS /} {/ Paste show notes /} {/ TAB: SECTIONS /} [00:00:00] Introduction [00:01:48] Overcoming Physical Challenges [00:07:36] Ad [00:07:55] Becoming a Course Creator [00:11:29] Interactive Learning and Teaching Strategies [00:18:09] CSS for JavaScript Developers [00:23:23] Favorite CSS Features and Modern Web Development [00:25:45] Building Delightful Web Experiences [00:29:00] Exploring Sensory Integration in Mobile and Web Apps [00:30:34] The Joy of React: A Personal Journey [00:41:29] The Importance of Performance in Web Development [00:43:51] Introducing the New Course on Animations and Interactions [00:46:49] The Future of Developer Education [00:53:04] Concluding Thoughts and Farewell {/ TAB: TRANSCRIPT /} Josh: doing stuff actively is a lot more effective, right? If you're doing it yourself, in fact, I think we've all had the experience, you go through a tutorial and you're following along and you're understanding, but you're just reading, you're consuming it. And then you go to your project and you have no idea how to apply those things because you haven't done any of that. [00:00:21] Introduction Andrew: Hello. Welcome to DevTools. FM. This is a podcast about developer tools and the people who make them. I'm Andrew. And this is my cohost, Justin. Justin: Hey everyone, uh, we're really excited to have Josh Gamal on with us today. Josh, you, uh, are a legend. Uh, I don't know. I love all the stuff that you do. Uh, so this is really special. Um, I was just saying before we started the recording, your, your site is, uh, an immaculate work of art. It's, it's. Brilliant, uh, and your educational content is fantastic too. So, we're incredibly thrilled to have you on. Josh: goodness, you're making me blush here. Justin: Before we, yeah, thanks for joining us. Before we start talking, uh, or before we dive into our questions, would you like to tell our audience a little bit more about yourself? Josh: Yeah, so I'm a software developer. I live in Montreal, Canada. Um, I started tinkering back in like 2007, 2008. Uh, I really got my start a few years later when I got my first dev job in like 2014. Um, I've done a whole bunch of stuff, uh, for a whole bunch of companies, but really what I find myself, uh, really gravitating, gravitating towards is building whimsical interfaces, uh, really like trying to find the best way to create a given UI or to solve a problem. And these days I spend my time creating online interactive courses. That's what I've been doing for the past few years. I blog at joshwcomo. com and I create, uh, see, I have courses on CSS and react right now. Andrew: Cool. So you have an extensive blog. [00:01:48] Overcoming Physical Challenges Andrew: I read a few posts preparing for this interview and one that stuck with me for a while, uh, since I'm also a web developer and I love to focus on the front end was the period of six months where you weren't able to use, uh, Your arms, like you usually would to use your computer. So can you tell us a little bit about that experience and like how it changed how you view interfaces and what you do, Josh: Yeah, uh, so it was interesting. I injured myself somewhat ironically in physiotherapy. So I was there for some other issue and I pulled a nerve doing the exercise. Um, and to make a very long story short, for about six or seven months, I couldn't really type without my elbows really bothering me. So I tried like a whole bunch of things, right? All the ergonomics. Um, but what I eventually settled on as a way for me to keep working was to not use a keyboard at all, in fact, to not use my hands at all, and the way that worked was I had a microphone for dictation and an eye tracker, so a little camera that would see where I was looking as my mouse, uh, and so you learn really quickly just how, how inaccessible so much of the internet is and how we take for granted the fact that like, Your little fingers can just go, uh, and it can go so much faster than you can using other methods. So, like, I did spend quite a few months learning the skill of how to dictate, and it's surprisingly sophisticated. Like, the way that it works is you create a bunch of little functions for yourself. So, short words will, uh, sort of expand into larger snippets. So, it's very customized to what you do. Uh, I, you know, I was using style components at the time, so I created a whole bunch of little style component helpers. And with that, you can get pretty good, uh, you can sort of get back to like, uh, something approaching what your speed is with a keyboard. Uh, but you never quite catch it. And, uh, so it was definitely an eye opening experience in a few ways. One thing that I took from that was, uh, starting to think of my output, right? My ability to code as a currency. Uh, so I, the way that I had thought about it and the way I think most of us think about it is that we have this infinite time horizon ahead of us and, you know, the characters are free, like typing is totally free. Uh, whereas this experience sort of made me shift and imagine that I have this pool of key presses in my life. And every time I press a keyboard, that number goes down by one, right? It's a limited amount of, of key presses. Uh, so that was actually what inspired me to leave my job and start creating courses, which is that it was this fun thing that I thought I would enjoy doing, that I thought I would be good at. Uh, but it was something for the future because I had this infinite time horizon ahead of me. Uh, so I realized, no, actually, I shouldn't assume that I'll be able to do this later. I should do it now. Um, and, and I alluded to this a little bit too, uh, it really sort of opened my eyes to how inaccessible a lot of the internet is. Uh, the mouse replacement was surprisingly helpful because that you can, it, it really makes it possible to click on things. But before I found that, like trying to navigate by saying the word tab and to go through websites like that, it just, it doesn't work. Um, and so these days I really try to make sure that. Everything I build, um, is keyboard accessible. And in fact, in a lot of things that I build, I add little Easter eggs that are only accessible by keyboard. So I figure that way, you know, I'm sure keyboard users are used to having a, like a limited subset of what everyone else has. I like the idea that actually you can do more. If you use the keyboard on my products. Andrew: it must've sounded wild when you were using your computer and just spitting out all of these like custom functions that did your own language. little Josh: yeah, no, it's totally incomprehensible. And actually the, one of the problems is that I'm not used to like speaking for six, seven, eight hours a day. So the throat, uh, survival became a real challenge. Justin: I wonder, so, this was, when was this, around 2017 ish? exactly the, Josh: I think it was 2020. So during COVID during whole thing. Justin: I, I wonder, and it's crazy just to think about like, okay, well, COVID was, uh, almost five years ago now, which is, uh, to think about, but technology has obviously rapidly advanced. Uh, we have LLMs now. Um, I went to a talk, uh, at the last Strange Loop and there was this guy there who had demonstrated this tool he was building called Cursorless, which is like, Cursorless. Puts little dots above words in code in your editor or whatever to make like voice navigation a lot faster. I wonder like if you redid this experience today, if it would like. Be different or better or I don't know. Weirder, I guess. Josh: I mean, there is, so I think people are probably familiar with GitHub co pilot. Uh, many years ago, before Copilot had even sort of reached, like, so around 2021, 2022, maybe, um, there was a team at GitHub working on Copilot Voice, which was very similar to Copilot, but with a voice interface. And it was sort of specifically for this use case of people who can't use a keyboard and mouse. Um, or at least that was how it was like, because I got a little demo and that's how they pitched it to me. Um, and it's interesting because it does sort of feel a lot more natural now where you don't write the code or you don't dictate, uh, you know, it's, it's declarative, right? You, you sort of say what you want the code to do and the, the tool figures out the implementation for you. Um, it's something that I feel like, uh, it was too far removed from what I had wanted to do. Uh, these days, maybe I would be more, uh, cause you know, I've started using the composer tools in cursor and things like that. So maybe now it would be more, uh, more palatable. Um, yeah, and I think that actually is a really exciting use case for AI is to just, you know, if we can get the same output in less input, uh, that's like a pretty trivial thing for most people, but a really significant thing for others. Justin: yeah, absolutely. [00:07:36] Ad Andrew: We'd like to stop and thank our sponsor for this week, but we don't have one. So if you'd like to sponsor DevTools FM, head over to DevToolsFM slash sponsor to apply. And if you want to find another way to support the podcast, head over to shop. devtools. fm, where you can buy some merch and rep the podcast. With that though, let's get back to the episode. [00:07:55] Becoming a Course Creator Justin: Um, maybe before we dive in and talk about, um, sort of your courses and what you're doing about education, can you tell us a little bit more in depth about your story? Uh, of like. Becoming a course creator. So you just alluded there. It's like just realizing there's like a limited amount of key presses that you could do is like really motivated you to leave your job. And, but like, what is that overall story? Because it's like, um, creating is one thing, teaching is, is another thing. And they're very, they have some synergies, but it's two different, very distinct skills. So I'm curious about journey of like how you. Josh: Yeah. So there were a bunch of sort of pieces that came together. One was that in 2017, I started working for a company called Khan Academy, and they were based in Mountain View, and I'm here in Canada. So I rented an office at WeWork. And at that WeWork, there was a code boot camp. And so, you know, you meet people at the co working space. And so eventually I would go to their demo days, because it's always so cool to see what people build. Um, and I started teaching there, sort of working part time. Um, and did that for quite a few years. Eventually I became one of the lead instructors and developed their React curriculum. And, uh Initially, I had thought of that almost as like a little hack for me to get better because there's nothing More humbling than, uh, working with people that are brand new to it. And they ask a question like, what's the difference between a statement and an expression in JavaScript? And you open your mouth to answer and realize you have no idea, like you have sort of a broad, you know, you've worked with it enough, uh, that you can use these things, but to actually put into words, like, what are they? It's very good at helping you find your own blind spots, right? The things that you've just never learned and have worked around your own holes. In your knowledge. So that's what that was really my motivation was. I thought it would be a really good way or really, I don't know if this was my original motivation, but it's why I kept doing it because I discovered that it was a great way for me to get better myself. Um, but in that process, I realized that it was really quite a lot of fun. Like, I enjoyed the process of helping people understand things. I learned a lot about what does and does not work right. A lot of my explanations. Initially, you could tell when you're with someone in person, if it's going over their head, it's very obvious. Um, so that was sort of my, my initial, uh, experience with that, but I had also seen what fellow Canadian Westboss and many other people have been doing with their own course businesses. Um, and I had been blogging since 2014, so I had my blog running for a long time as well and enjoyed doing that. So I sort of, I feel like somewhat haphazardly, I had been assembling the pieces, uh, that I would need. And in 2020, when I had that whole experience, it, it struck me that, no, I should do this now. Um, and it is, you know, I get a lot of emails from people who also want to create courses and it's counterintuitive, but people often start with the course, which is like step seven. Like there's a bunch of stuff you have to do before you make the course. Otherwise, if you make the course, uh, you'll release it into the world and nobody will really know about it. You need those sort of earlier steps, right? You need to have some sort of, uh, either a blog or a YouTube channel or a tick tock or something that allows you to demonstrate to the world that you know what you're talking about and help people so that you build that sort of relationship. You need some experience teaching too. That's really important because you could. You can be the most knowledgeable developer, but if you've never actually taught it to anybody and you try to create a self coursed product, you're gonna learn pretty quickly that, uh, things aren't as clear as you thought they were when you tried to explain them. So there is a lot of these pieces that, uh, I think people, uh, miss, but they're really important foundational, uh, precursor steps. [00:11:29] Interactive Learning and Teaching Strategies Andrew: Yeah, so you take a lot of steps to, like, kind of demonstrate that expertise. Like, if you go to, like, almost any page on your website, there's a very detailed breakdown and an interactive example to kind of, like, help teach and push the lesson along. So, what inspired that more interactive, creative type of learning experience that you go with in most of your lessons? Josh: Yeah, um, it's a great question. I saw a talk from Brett Victor called Stop Drawing Dead Fish many, many years ago. And the theme to his talk is that if you have a pen and paper and you draw a fish, right, you draw that little fish shape that everyone's familiar with, that's like a pretty good fish. That's a pretty good fish for the medium of pen and paper. But if you take that same fish and you make a video of it and the video is 10 seconds long and it's just, uh, the camera's zoomed in on that drawing of a fish, that's not a fish. That's a dead fish. Because a fish moves, right? It swims around. And similarly, if you build a web application or a game or an interactive medium and the only thing your fish does is swim around and it doesn't respond to cursor input, uh, then it's not actually a fish, right? It's not a true representation of a fish for the medium that you're in. So I saw this talk and thought it was really cool and really interesting. Um, and it occurred to me that blogs fit on this spectrum, right? A blog is not a book. It's not a video. It's something that you can have words and videos within it. Uh, but it's so much more than that, right? You have this opportunity to allow someone to experiment with ideas and try things out. You can have embedded code playgrounds and demos, or you have little sliders where you can really show the person in a much more like effective way than words would do, or even pictures or videos. Uh, you can have this. Uh, 10 second experience where someone drags a slider and it immediately clicks because they're the ones sort of interacting with this thing and testing their own mental model and seeing how it holds up. Uh, it just struck me that it's such a better way to learn most things. Um, and so when I first created my blog, like I started blogging on medium. Um, when I set out to create my own blog, which I think was in 2018 or 2019. Uh, this was sort of the, uh, a must have for me is the ability to do. Whatever I would do in software development, like whatever sort of, uh, freedom or flexibility you have building websites, I want it to have that when I write blog posts. If I had this idea for An embedded thing. I wanted to be able to do it right. Not just be limited to the handful of HTML elements you have with markdown. Justin: Uh, I love that talk. First off, uh, Brett Victor has some real bangers and his early, his early talks on that. That one's fantastic. Um, and I think your work really speaks for itself. It really does shine. And, you know, it's interesting to think about, like, how people learn and what helps things stick. Um, so you, you sort of explore this, Uh, how do you sort of communicate this information in the medium that is appropriate and sort of leverage all the tools you have, but then I think it's also interesting. There's like this meta cognitive piece to your work where you write a little bit about. learning itself, how to learn, uh, which I think is also really cool. Um, and I just like wanted to ask kind of how does that influence, um, how you think about teaching? Uh, I'm a little scattered, but if we go back earlier to, you know, you're, you're giving the example of like someone asking about like an expression and JavaScript, it's like, Oh, what is an expression? And. That makes me think of like, people say the best way to teach or the best way to learn is to teach, uh, because you, you fully have to understand it. And there's this like meta level there. It's like, well, if you want to be a really good teacher, then you kind of really need to understand how people learn. And I don't know. So I'm curious how all that like shapes how you think about teaching. Josh: Yeah. So, uh, when I worked for the local coding boot camp, they gave us a book about how to teach software development effectively. In fact, I read a few books on the subject because I really wanted to, like, figure out what I was doing. And the takeaway that I took was that there's sort of like two different modes you can have when learning right there's the active mode and the passive mode. Um, passive mode would be like you're watching a video, you're listening to a talk, uh, you're reading a blog post, whereas active mode is like you getting your hands dirty, like you're experimenting with things, you're building stuff, um, and as I think all of us have an intuition for, doing stuff actively is a lot more effective, right? If you're doing it yourself, uh, in fact, I think we've all had the experience, they call this tutorial hell of like you go through a tutorial and you're following along and you're understanding, but you're just reading, you're consuming it. And then you go to your project and you have no idea how to apply those things because you haven't done any of that. Um, the problem though with active learning is that it's really hard. Like it's, it takes energy and we're sort of naturally lazy. Um, so if you're, you know, if you build a course where you're throwing someone in and it's all just exercises and challenges, it's going to be pretty exhausting and people aren't going to enjoy it. So, uh, the, when I was at a boot camp, We had a little bit more flexibility with this because people had paid 10, 12, 000. Uh, they're probably not going to like stop showing up if you challenge them. So when I was building the React curriculum for them, we really did, uh, focus more on making it effective rather than making it pleasant. Like we figured it would be pleasant once you learned it, even if it was really frustrating during the day. Um, but as like someone writing blog posts or creating my own courses, you have to find a better spot on that spectrum, right? Like, so my courses now, I try to have a pretty equal mix. Where, like, we'll have some casual videos and some, like, kind of easy things to get you started, and then I'll throw an exercise at you, and, um, I also think it's really important to mix things up. Like, similar to my blog, which, uh, has, you know, uh, embedded videos and exercises, or not so much exercises, but, you know, little playgrounds that let you try things. Uh, I try for my course to never have too much of the same medium for too long, so if one lesson is written, the next lesson will be a video, the one after that will be, like, a little minigame, or something that sort of throws you off from what you're doing. Um, and all of this is sort of in service of keeping the person going and trying to find the right balance because, you know, uh, people can only spend so long reading article after article, if you mix it up a little bit, if you try to vary the format, uh, it makes it easier to stay engaged for longer. So, yeah, it's definitely like, I hadn't necessarily realized when I started this journey, but, uh, there was so much strategy to it. Like, you know, you think just make a nice video, make a nice blog post and people will read it. Um, but yeah, it's, I'm glad you asked about it because it is this, uh, interesting subject that I don't get to nerd, nerd out, uh, about very often. Andrew: So next let's dive into some of the content that you've produced. [00:18:09] CSS for JavaScript Developers Andrew: I think the first big course that you came out with was CSS for JavaScript Developers. So what inspired you to write that course? And maybe like, what was one of the harder examples that you spent a lot of time like perfecting on in the course? Josh: So I wanted to make that course because I had worked, you know, I, from maybe like 2016 or so, I mostly worked in front end, mostly worked with JavaScript frameworks, like first with Backbone. If anyone remembers Backbone, a little bit of Ember, a little bit of Angular, and then React where I've spent quite a few years now. And I knew so many people who would probably describe themselves as JavaScript developers, right? Front end developers who really lean into, like, the back of the front end, as they say. Like, the more, uh, the framework stuff rather than the UI stuff. Uh, and so many people in this category have a pretty good level of understanding with JavaScript, a pretty good level of understanding of HTML, and then there's CSS, which is like their Achilles heel, right? It's the thing That, uh, always ruins their afternoon because it behaves unpredictably. And it's not surprising to me. Like, I was in this boat myself where I never learned CSS. Like, very few people, you know, when I taught at the boot camp, you have this 12 week program. Uh, 11 of the 12 weeks are JavaScript, and that week 1 is a whole bunch of different things. You have maybe an afternoon of CSS. Um, and when I was trying to figure out what I wanted my first course to be, because I had like 5 or 6 different things I could cover, Um, it occurred to me that CSS was the thing where I thought with a pretty small chunk of time, like 10, 15, 20, 30 hours, I could really get someone from like a pretty beginner level to pretty competent. Uh, I mean, CSS does take a very long time to get like expert level. It is very deep language. It's so many people are, uh, struggle with it so much and have such like a, uh, a lack of understanding because I've never spent the time. That I thought in a pretty small amount of time, I could really help solve a lot of these problems. Um, in terms of like, what was the most challenging part? Uh, something I wish I had realized when I was starting the course was, and I've kind of figured this out from chatting with people and from trying a couple of different structures. Um, a lot of people approach CSS from the properties. Like you think, okay, I'm going to learn what the color property does and what the display property does and what the background color property does. And if I can just learn all the properties, I'll know the language. When, really, I think a better way to look at it is that CSS is this constellation of mini languages. Uh, and they're called layout modes. Uh, I prefer to think of them as layout algorithms. I think that makes more sense for JavaScript minded people. Uh, that you have Flexbox, right? That's its own little world within CSS. And you have Grid. Uh, you have FlowLayout, which we don't normally name. But that's the default if you're not using one of these other ones. There's PositionedLayout. There's all these different things, all these different systems. And the CSS that we write. So, like, when I write width 100 pixels, That property is going to be passed in as an input to this layout mode and that layout mode decides what to do with it. Like Flexbox treats with differently than flow layout does. And this, this core part of how CSS works is responsible for so much of the misunderstanding because like, I think we've all had the experience of like, you have your little go-to snippet, right? The snippet you've used over and over again. It's worked for you the past 99 times. You used it today and you get something different like the UI does not look like what you expect it to look like. And this is what makes CSS feel really sort of unpredictable. But it almost all, or not all, it often has to do with this discrepancy between what we think we're doing, which is passing it a bunch of properties and what's actually happening, which is the language is figuring out which of these layout modes to use, feeding those properties through as inputs, like as arguments to that function and using that to decide what the UI should be. And so this is sort of how I've structured the course, but it took me a while to figure out that like, oh, this is actually the core idea that the course should be built around rather than a thing that we sort of. Visit here and there. Andrew: Uh, yeah, yeah, it CSS is the one subject where I feel like I am an expert, but there's other people I can look to in the field and go, oh, there's much, much more for me to learn. And I think where where my expertise is is in those layout modes. But as you said, there's like. Such breadth and like creativity you can have in that breadth Josh: Yeah, no, it's, uh, I've, I've had the pleasure of speaking at conferences like CSS day and when I go there, I realized that like, oh, I don't actually know anything because, you know, I'll be chatting with people like Miriam, Suzanne, who came up with a specification for container queries and all that stuff. Uh, Rachel Andrew is another person that, you know, they're so, they understand things so much deeper than I ever could. So it's the rabbit hole goes deep. Like there's, there's many layers of understanding and, you know, I've been chugging along now for quite a while. I think I understand it pretty well, but there's always more to learn. Justin: I think some of the, um, reputation that CSS has is. From kind of how it used to be to interact with, you know, there were a lot of limitations and CSS has evolved a lot, especially over the last several years. Um, I mean, cause previously, you know, just to do things like if we go way back when people were doing table layouts, it's like making a rounded corner was an ordeal, right? We're definitely not in those days anymore. So it sort of begs the question of this, CSS, what feature [00:23:23] Favorite CSS Features and Modern Web Development Justin: has been your favorite? Josh: Yeah. That's a great question. And I do like as a very quick aside, uh, I think part of why CSS is set up the way that it is and why we have this whole system of a bunch of languages within CSS is because we started in one place and it's been 25, 30 years since then. And we can't remove anything, because if we were to remove things, we would break websites that were built in 1999. So we have to keep bolting new things on, and that's what sort of gives it the sense that it's this enormous thing with 45 ways to do anything. But that's how it has to be, because, you know, it's important to have backwards compatibility. Favorite new CSS feature, uh, would have to either be container queries, which took me a while to like really get the hang of using them, but now I find that they're Totally indispensable and the has pseudoclass, so colon has, uh, which honestly, as someone who mostly works with JavaScript frameworks, initially, I had thought that it wasn't really that relevant for me because, you know, I don't write a lot of complex selectors. I sort of, you know, I rely mainly on, I have a class that applies to this element. I have a component that has a collection of classes. Um, so I didn't imagine myself writing these selectors where you have like some high level thing with has and then some low level thing. Or some much more deeply nested thing. But what I found is it's incredible for matching other states. So if you want your, let's say you have a form, right? That form has a couple of inputs in it. If you want to apply styling to the form, if one of the inputs is invalid, you can do that, right? You can say form has input colon invalid. Or if you want to have something on the form when the user hovers on one of the inputs, right? There's all these interesting relationships that you can do it with JavaScript, but it feels so nice to be able to do that with CSS now. So that's definitely been the most surprising in terms of new features I didn't really think would offer that much to me, but have again become a totally Uh, I can't imagine going back to not having it now that I've gotten used to it Andrew: Yeah, those two features in particular were like my wishlist features forever because I always found that like I need I need a little bit of has or Media queries don't just cut it. Uh, I was every post by nicole sullivan on the chrome dev team She'd be like what features do you want every time I was? Container queries, and now they're doing masonry layout. It's, it's kind of amazing the things that we're getting in modern CSS right now. Josh: Totally Andrew: Um, [00:25:45] Building Delightful Web Experiences Andrew: so when you're creating your websites, you like to have so many different fun, little details and flourishes throughout. I think that's, that's where it shines. Like you scroll and a little, uh, 3d Josh pops in from the side and asks you to subscribe. Subscribe. So, uh, what's your approach to building delightful experiences? And like, what are like some like go to flourishes that you have? Like you mentioned that you like to add little extra things for keyboard users. Is there anything else? Josh: yeah, it's a great question. Um, I think that And it's, it's so hard to answer because every sort of project is unique. Any, anytime I'm trying to come up with something, it really is dependent on whatever it is that I'm building. Um, I think an important ingredient is, uh, novelty, right? Um, I think we've all seen the, the confetti, you know, you sign up for a new service and you get a burst of confetti and it's always like the same confetti, like it's the same, like someone went to NPM and found the first confetti package. Um, and that's sort of, you know, confetti is a wonderful thing, but if it's the same confetti that I've seen a hundred times before, it gets a little stale. Um, so a lot of it is trying to come up with, like, what can I do that's, like, a little bit different, a little bit unexpected, because that's, that's what makes it so nice. Um, on my course platform, and actually I'm going to be launching a landing page for my third course pretty soon, um, which actually is going to be on all this stuff, so I'm making a course on whimsical animation, which is It's already so much fun to get to work on this stuff. Um, but the like celebration in that landing page and in my course platform is fireworks, because you don't really see fireworks on the web very often. And with 2D Canvas, it's not too much trouble, uh, to set it up. So that's really the, the sort of strategy is to come up with a way to do something that's unexpected and surprising. Uh, the little guy that you mentioned, right? Uh, my, my goal was to increase newsletter subscriptions, because not a lot of people were joining my newsletter. And the way people typically do that is with a pop up, like you're scrolling and all of a sudden this dialogue is in your face, right? You can't look past it. Um, and everyone hates those. I didn't want to do that, but I thought like, what if I asked permission to show one of those by having a little guy sidle out from the side of the screen? Um, and it's very polarizing. Like I'd say eight out of ten people say that it's like delightful and it made them smile. And then I get the occasional person who's like, it scared the heck out of them, like ruined their afternoon. Um, so it's a little bit like, like a surprisingly controversial, but, uh, as long as most of the feedback I get is positive, I consider that a win. Um, Justin: yeah, I think there are, like, aspects of, this goes back to, like, choosing the right display for the medium. There's, like, a lot of aspects of the web that we just don't use. Like, your website is one of the few that I know of that uses, like, sound effects for, like, opening and stuff. Right. And almost any product design, if you have a physical product, there's all this haptic feedback. It's like, you know, an iPhone, you're tapping and you get like little clicks and get little vibrations. And like, it gives you that experience of typing. But so much of the web does feel that like a dead fish, you know, like, it's not really, Uh, built for purpose or like really taking advantage of the platform and uh, it is kind of delightful to see how you've expressed that and I'm excited for your course too. I think that is something we need a lot more of, uh, whimsy on the web. [00:29:00] Exploring Sensory Integration in Mobile and Web Apps Josh: Yeah, it's a really good point. And I appreciate you bringing that up because it does strike me that, you know, humans have five senses. Um, a typical mobile app will use three of them. Like you have obviously visuals and then sound, as you mentioned, and the haptic feedback, there's a tactile element. Um, on the web, we have one of them, right? We are one third, uh, as sensory activated reactivation. Um, so it does strike me that there is, you know, and granted, like, Okay. I always get pushback with this because people say, like, I don't want my bank website to be making noises, right? There, there's certain, uh, utilitarian use cases that you don't really want, uh, a bunch of, uh, extra sugar thrown on top of it. And that's totally valid. Um, but you know, I think there, there's lots of, uh, mobile apps do a really good job of this, of trying to find tasteful ways to integrate some of those things. It doesn't have to always be super over the top, um, and I agree that it's, uh, you know, people have preferences around sound, but people also have volume buttons. So it's totally within the user's control. If you don't want to have sound, you don't have to have it, but it'd be a nice thing to, to take advantage of that more. And that is something actually, uh, I've really gone over the top on the landing page for my new course. Everything makes sound on it. So I think you'll enjoy that. Andrew: Yeah, We need to go back. We need to go back to the MySpace days where every, every song has, uh, or every page has a song. I, I, for one, don't want the web smell API. I think can we Justin: ha Yeah, maybe that's a sense we can avoid Josh: we can skip that one. Andrew: Then we'll really know if it's a dead fish. Uh Justin: So [00:30:34] The Joy of React: A Personal Journey Justin: so, was about React and you titled it the joy of React. So why is React joyful to you? And like, maybe how did it change how you approach development? Josh: Yeah. So I first started using react in 2015 or so. I think that was the first job that I had. I was working for a services group and they were always trying new technologies to see what, what would work. And before that I had been using backbone and angular and had found both of them very troublesome. Like, you know, it felt to me like there was a lot of stuff you had to learn and you weren't really learning JavaScript, you were learning Angular, you were learning Backbone. And I always felt like there was a little bit of tension there. When I started using React, um, there was new stuff to learn, especially like Flux was, uh, the, the typical pairing back then. And Flux was kind of similar where it was a lot to get your mind around. Uh, but it just struck me that it was so much more straightforward than the other ways of building web applications. Um, and over the years, I've really developed a fondness for this tool, where the more I get to understand it, the more quickly I can move with it. Um, I've tried, granted, some of this is pretty surface, uh, but, you know, I've tried a lot of modern frameworks as well, and some of them seem really, really cool. Um, but, like, with Svelte, for example, uh, even though I really enjoyed using it in the couple of projects I've used it for, It felt like it had a little bit of that, uh, magic box sort of component where, you know, instead of using an if condition or a ternary operator, you have your little, I forget what they call them, but you know, you have a little data attribute sort of thing that, uh, has, or like view, also you have view if, or V if. Um, and there's nothing wrong with that, but it always struck me that this is an extra layer of things I have to learn where I know how to do this in JavaScript, I would like to do this in JavaScript. So, uh, at least for myself, React really sort of worked with the way that I like to work and similar to the CSS course, like I did know a lot of people, uh, not really the same people as the CSS course, but a lot of people who would try to learn this thing and sort of, especially when teaching at the bootcamp, like it really, I, cause we would teach React. And I would see how many people struggled to really get the pieces to click. Um, so that was sort of the same thing that, uh, I knew that I would want to create, uh, a React course at some point. Um, I had actually started working on a Whimsy course back in 2022, whenever that was. Um, but my Whimsy course will have React components. The whole thing won't be React, but I will have maybe a module or two on React. And it occurred to me that I should build the courses in the order that people should take them. So, uh, that was sort of the, almost by default. What my second course wound up being and it wound up being a course that I'm really happy with and of course that Uh, I think more than my others is really focused on the the practical elements of how to get started It is like I'd say a little bit more aimed towards intermediate devs junior to intermediate Although actually I did a survey recently and was surprised how much experience people had Um, but that was sort of who I had in mind when I was building the course is like a recent boot camp grad, right? Someone maybe six months into their career, really struggling to understand this thing. Um, and it's, it's been a lot of fun, uh, to work with people and to see the, the effect that a course like that can have. Justin: just kind of tying this back. So we, we talked a little bit about CSS and the sort of like evolution of CSS. And even though there's been a lot of stuff that's been tacked on, it feels like over time, CSS has actually gotten a little bit easier. There's more to learn, but like. Accomplishing certain tasks is just easier. It's like, you can send her a div now. It's not a problem. You know, it's uh, we're, we're past that being a hard thing. Uh, whereas like react is, was like really famous for being very stable and it still is a very stable language. They don't like do a lot of breaking changes to the API and it like. Has just been kind of steady for a while, but as they're gaining more features and they're thinking more about like integration to meta frameworks and like these larger product features that like companies end up needing more advanced technology for things are just getting a little harder to learn. They're like more things to fit in your head. Server components is like a big thing. It's like. You know how that, like what that concept means and how it fits in with all the frameworks and everything. So I'm curious, like what you think of the sort of like new features that have been released in react recently and how that sort of shapes how you think about teaching react. Josh: Yeah. So the timing actually worked out really well for me in that I was working. I had always planned on having the final module of my course be on full stack react. So using a meta framework. Uh, and it was, as I was working on that, that the AppWriter was released in beta. Um, so the timing of that was really lucky and it actually worked to my benefit that I'm so slow at making courses that I had planned on finishing it much earlier. Um, but yeah, I know it's, it's definitely a lot and it is interesting. Like you, you know, there's this state of react survey that happens every year and every year I'm surprised by how few people are, you know, something like a third of react developers have never used server side rendering. Like it's not small numbers and most people are still using react as a spot, like as a single page application. Um, It's interesting where I don't think it's fully true that the react team is like, you know, uh, sacrificing client side only react applications and all in on server side, full stack sort of setups, but that is undeniably an area of focus for them. And I think it sort of remains to be seen how much this will be adopted. Like, one of the nice things about react was that you could drop it in super easily. Uh, you could migrate your way to it. You know, you'd say this, this one route in my application, or this one widget in that route is going to be your back component and we can expand outwards from that with a lot of the full stack stuff, you need to have a whole stack. Like you need a backend that's written in node. You need to have. Uh, services that are sort of hard to run on your own, right? Uh, Next. js can be run on a typical node server, but it's usually run on specialized, you know, with Netlify or Vercel. So there's definitely a lot more of a barrier there. And I think because of that, we haven't seen the same level of adoption as we've seen with, like, Hooks, where, you know, they've only been released four or five years ago, and yet they're, 98 percent of React developers use them now. So it is interesting. I, I'm not fully, uh, so especially like server actions or actions more broadly is their latest thing. Um, and over the summer I rebuilt my blog using all the latest stuff. So it's using next 14, uh, and you know, it's react server components. Uh, and I, I tried using actions and found that I wasn't really part of this might just be like the old dog doesn't want to learn the new trick. Like I know how to do this really well without it. Uh, but it, it didn't strike me as a big enough difference to overcome the inertia that, you know, we've all gotten used to creating little API endpoints and firing off a fetch request to them. Um, so it remains to be seen, I think, uh, I think that it's, it's absolutely true that there is a lot more to learn now, uh, but you also don't need to learn at all. Like you can totally keep using React as most people use it. Um, I don't think that's going anywhere. So part of it is, I think like the, and this is a skill that I have yet to develop myself. Uh, so this is very much like do as I say, not as I do. Uh, but we don't have to jump on every new thing, right? It's fine to say, okay, that's cool, but I'm going to keep doing things the way I've been doing them. And I'll wait a few years and see what, where the momentum has gone. And if it really is something that everyone's getting, or everyone's using, then I'll take the time to learn it. Um, but you can totally just keep doing things the way you've been doing them. Andrew: Where there's some features you were building for your blog when using app router that you're like, wow, like server components here kind of just like shines and you kind of see all the value cause there's a, there's a lot to it and a lot of different situations you can use it in. Yeah. Josh: Yeah. It's a good question. I think that, like, just from a mental model perspective, like, it's really cool that now I can have some components that exist just almost like as a template, right? They're not dynamic, they're not interactive, my layout component, um, I just want to be able to describe a bunch of markup and not have to pay the cost of bundling all that markup into my bundle, sending it to the client, waiting for it to hydrate, rerunning all that code on the client, even though it's going to be exactly the same because it never changes. Um, it does sort of feel nice that like, Hey, now we don't have to worry about this right now. I can have some components that only run on the server the way that PHP works, right? Um, but at the same time, you have this really nice integration where you don't have to learn an entirely separate language on the front end. It's all still react. So the mental model is a lovely thing and something that I really enjoyed using. I had honestly expected there to be more of a performance improvement because of that. And maybe it's just that I had very few server components. Like I have all the little sound effects and stuff mean that that component has to be a client component. So I'm probably not a representative, but my performance didn't really improve. In fact, I got a little bit worse, uh, which comes down to how next handle CSS, they changed that. And it doesn't quite work as favorably for me with the tools that I use. Um, still good, but, uh. It hasn't really, I wouldn't say that there was anything about it, but I found, uh, and this is sort of why I say it's okay to keep doing things the way you've been doing them. In fact, I have two main projects that I work on now. I have my blog and my course platform. I migrated the blog, uh, because it was due for it. You know, I had built that blog a few years ago and I was also, it was all JavaScript and I wanted to move to TypeScript. And actually it was like 10 percent TypeScript and now it's like 95 percent TypeScript. Um, but my course platform. It's still using the pages router, it's still using the older way of doing things with Next. js. So it's still a full stack application, but it's not using the latest thing. And I don't really plan on changing that anytime soon. Like, as far as I know, the pages router is not being deprecated. Um, and it really doesn't strike me as bad. Like, I still think it's a really cool way to build applications. So, maybe eventually, you know, again, if the community really makes clear that this is where we're all going to go. I'll jump on the bandwagon, but, uh, for now, I think for that application specifically, and for, uh, listeners more broadly, right. If you're in this situation too, and wondering if you should migrate, give it a shot if you want, but don't feel any pressure. Like you have to, because I don't think you do. Justin: Yeah. I agree with that. I feel like a lot of these. Advancements, especially in like JavaScript frameworks, they hit on these relatively, I won't say niche, but they're like advanced performance features that like, you know, teams that are shipping big products ultimately need. And, you know, if you have a small site, um, you could probably still benefit from these in some ways, but like. Usually, if you have a small site, performance isn't like the first thing on your mind anyway, right? Uh, that's why like you were saying there's a lot of people just still doing single page apps and You know a lot of them are just like, you know Struggling to push out features as fast as they you know need to to just like maintain their business so it's like the the performance thing isn't like top of mind anyway, so um Definitely use what you're comfortable with and you know, it is the old adage is like make it work Make it right make it fast. It's like in that order uh, so Um, yeah, I don't know. There's a trade off with adopting a lot of this complexity Josh: Yeah. [00:41:29] The Importance of Performance in Web Development Josh: And like, uh, just very quickly, uh, server side rendering, right. It's this great thing because it means that you can do that initial pass on the server. Uh, it means that you don't have to have the user stare at a blank white screen while you wait for all that JavaScript to be downloaded and hydrated. That's really important if you're building an e commerce site that relies on search engine traffic, right? If you're building the walmart. com website, well, the problem is someone searching for air conditioners. They have a whole list of a bunch of different stores. They click on yours. If it's not loaded in half a second, it's so easy to hit the back button. Try Canadian Tire. I'm in Canada, so I, uh, whatever. Target is probably a more relatable other option. Um, Most of us aren't building that right? Most of us aren't building, uh, sites where almost all of their traffic comes from search result pages. And if you're building a dashboard, like, does it really matter if the load takes 1. 5 seconds or 1. 8 seconds? Is anyone going to, is that going to have any business impact or user experience impact? Um, I think that it's so, we're so focused on certain areas of performance, right? What is that initial load time? When for most of the applications that we build, there's so many other aspects of performance that are more important, like how snappy it feels to use, right? Is there any like, uh, layout shift that happened? Like, if you click on something, avoiding all the spinners is a good example of the sort of usability thing that doesn't really show up in performance metrics, um, perceived performance, right? Like just how, how does it feel to use rather than sitting with your stopwatch and measuring it? I do think like it's, it's, and this is everything, right? We always get sort of drawn into what is easy to measure rather than what actually matters. Um, so it all varies by your use case. But I would say that single page applications are totally workable for like 80 percent really, they're workable for a hundred percent, but they're like, uh, roughly equivalent for 80 percent of applications. And in the 20%, there is actually a reason to a noticeable benefit and a strong impulse to do it. Um, but yeah, I think it's, it's always important to think like, is this thing important for my project or is it just important so that like, you know, I, my lighthouse score won't be embarrassing to me on social media. Um, it's always good to ask yourself that. Andrew: Yep, it's easy to measure the wrong thing and then put a lot of, a lot of weight into that wrong thing. Uh, it definitely happens a lot with performance. [00:43:51] Introducing the New Course on Animations and Interactions Andrew: Uh, so let's, uh, before we wrap up, let's talk about your new course a little bit. Uh, I like how you framed that you needed to do the other two before you did this one. And that makes a lot of sense. Like you need to know CSS to do animations. You probably should know a little bit about React JavaScript before you do animations as well. So, what do you plan to cover with the course? And, Yeah. Josh: Yeah. Well, this is just like, I, I feel like you all are being too nice to me. Just give me all these opportunities to talk about the cool stuff that I think I'm doing. Um, yeah, my new course is focused on specifically the little bits of polish and whimsy and interactions and animations that I really enjoy building. Um, this, I think was like the most obvious thing for me to build from the very beginning, but exactly as you say, uh, I didn't want to create In like that had dependencies on things that I plan on covering anyway, like I thought it made sense to build the courses in the order that people can take them. Um, I hadn't necessarily factored in that would take me like a year and a half per course, but that's the way it goes. Um, but yeah, the course is going to focus on the way that I'm planning on structuring it now is having six or seven modules where each module builds like a final effect. Uh, the fireworks that I mentioned are going to be one of those effects. Um, we're going to look at doing SVG icon animations because that's really cool. We're going to look at particles. I'm thinking we might do something with view transition. So like route change animations, because those are always, whenever I ask people what they want to learn, that always comes up. Um, but really the goal with all of these things is going to be to focus on like the little building blocks, the little like things that you have to know in order to fully implement, not just this effect, but effects like it. Um, it's also the first course that I made that's going to have some design element, because I recognize that like for most people. Uh, we don't have like a motion, an interaction designer sitting beside us that can design all this stuff. So I also want it to be, uh, useful for people in that situation where like, let's talk about how we come up with these ideas and how we avoid sort of going over the top with them, having it be too much. Um, so that's sort of the, the focus of the course is I want to be able to teach people how to build the sorts of things that I find, uh, really sort of, uh, like the most fun parts of my job, right? Uh, I, I like to tell people that when I worked at Khan Academy. I found out that there was designers working on a new confetti system and I like bulldozed, like I pushed everyone out of the way metaphorically and was like, Oh, I want to do that. I want to do that. And it was like the most fun I had that job. Not necessarily the most impactful thing I did at that job, but just like so enjoyable, so fun. Um, and it is, you know, it's companies do this stuff for a reason, right? There's a reason that Facebook has balloons and all sorts of little confetti effects. Um, it is actually a worthwhile thing to know how to do. Um, so I think it's a good, uh, it is, it's like, I feel almost like I'm being self indulgent and like letting myself dive into this stuff. But I do think there's, there's real value to it. And that's, that's how I plan on spending the next year or so of my career building that course. Justin: that's awesome. We're really looking forward to it um There's all these little tidbits that you do on your site, and I would love to learn how to do those. [00:46:49] The Future of Developer Education Justin: Um, So, before we wrap up, we usually ask a future facing question, um, and because you're sort of in the world of developer education, and you're thinking a lot about building these courses, um, and, and we've talked, uh, already about how, like, the times are changing. There are LLMs now. People are, like, coding differently. They're thinking about how they build products differently. And I'm curious for you, how do you see, like, Developer education evolving in the coming years. Like, Josh: that's a great question. I do think, like, so I mentioned I've been converting my blog to TypeScript. I am not a TypeScript expert. Like, you know, years and years ago, I used to use Flow. At Khan Academy, we used Flow. So I learned the basics of working with the type system then. Um, you know, and I learned a bit of TypeScript at my next job, and I've been using it haphazardly in my blog. But this summer was really when I started, or summer 2024, last summer, was when I really, uh, decided that I was going to learn this thing. And I was actually like, it was remarkable to me how useful it was to have chat GPT or Claude, uh, that I could be like, Hey, I have the situation. I don't know how to type it. Right. I have this weird situation. Uh, discriminated unions. I've heard people say, what is that? Like, can I use that here? Um, and you know, you have to sort of be very critical with the output you get, because sometimes it's just complete nonsense. As long as you have like, uh, the, the analogy I like to use is like, you're a member of the jury. And like the chat GPT is the lawyer trying to convince you of their client's guilt. And you really like, you know, you don't, you're not just going to accept what they tell you. You're going to like really think about like, okay, does this make sense? Um, but if you use it that way, it really is wonderful. Like it's a great way, uh, to at least point you in the right direction, right? It, it may not give you the perfect answer, but it'll give you the terms you can then search for to find the answer. That said there still, I think will always be a case because. You know, the, uh, it's very like call and response. It's very question and answer. If you have a low level, tangible thing, like I have this specific problem, I don't know how to do, it can help you solve that problem. It won't tell you like, you know, how to build an application or like what technologies you should be using. Um, it's not so good for like providing a curriculum and narrowing down. Cause there's a whole world of things you can learn. This is what I think was so beneficial of bootcamps and even like online curriculums, like the Odin project, uh, just narrowing down what people need to learn, right? Like people who are getting started, have no idea what's important and what's not important. And chat GPT sure as heck doesn't know. Um, so I think there will always be a role for instructors in guiding someone through the high level stuff, right? And then they can rely on AI for the low level filling in the gaps or answering questions. Um, so like personally, as a course creator, I'm not really worried. Like I think I've. Like everything else, right, you see discussions on how, like, there will never need to be X again because now there is this tool. I don't quite think that's true. Um, and actually I think they can work really well together. Like, as an instructor, uh, it may be that I can leverage some of this in my course platform and not only, like, lighten my own load in terms of how many questions I have to answer, but provide better experience because they don't have to wait, you know, the hours or days it might take me to see it and respond. So I think there is like, uh, my optimist view of this is that they'll actually sit really well together. Um, and there's always going to be, uh, opportunities for people that know how to teach, uh, to keep doing that. Justin: yeah, I've thought about this a lot and there was like one thing, I remember the first time I used chat GPT is like, the thing that struck me is that. You know that old adage, like, there are no stupid questions. Well, like, there are people who really don't want to ask certain questions in context, like in a, in a because they're afraid of feeling stupid. I mean, it's a, it's a real social thing. And, like, asking questions to an LLM feels completely different. They don't get tired. You can ask them endless follow up questions, and, like, they're not gonna judge you for it. It's, like, fine. And that was, like, Uh, a real like shift for me thinking about like, Oh, wait, so this is going to be a, an ungated like way for people to like ask questions. And I, and I think the other interesting thing is because it's conversational. I hope that this gets people in the habit of asking better questions. It like, you know, they, they, they have all this practice asking questions to get the right sort of information. I'm hoping that like, it helps people frame questions better over time, which. Again, hopefully we'll lead to just like improved learning, but I guess Josh: so interesting. Like, you're right because, and this is like, I think anyone who's worked as a developer and haven't had any sort of like interfacing with end users, right? If you've worked like at one of my jobs, we would use tech support. Like, so every developer would have like a support role. Or support shift as part of their job. And you learn that like a lot of people don't really know how to like provide a bug report, right? Like that's not even now, like I teach software developers so often I'll get a submission that like website is broken. Like that'll be the support ticket. Like, okay, tell me a bit more, please. Um, so it's interesting. Yeah. Because if you take that approach with a chat bot, you're not going to get very good output, right? Like it does sort of show you how to tailor your question. And maybe that will sort of translate to human communication as well. So that's really interesting. I think that, like, the thing that I do worry about is, like I mentioned, right? The way that I think is really advantageous to use these tools is to think really critically, right? I've been using cursor more and I catch myself, like, you know, I, I know what I have to do, but it's a lot of typing and I'm too lazy. So I throw it in the chat bot and it spits out 120 lines. And I'm so tempted to be like, I'm sure it's fine. Just accept the changes. Don't even read it. Um, and I worry people are like handing over the keys a little bit too much. Um, and the problem with that, like, that's great if it works a hundred percent of the time, but it doesn't, and you're going to reach a point now where all of a sudden the tool doesn't work and if you don't have that ability to analyze it, if you haven't been sort of analyzing it all along. Uh, you're going to find yourself in kind of a rough spot, but I think that maybe that problem solves itself. Like someone has a couple of bad experiences like that. Maybe that is, uh, maybe this is all, you know, it'll be self reinforcing in that way. Justin: We'll see. Yeah, I don't know. I am worried about the inherent laziness of people. Josh: You know, [00:53:04] Concluding Thoughts and Farewell Andrew: Cool, well that wraps it up for our questions this week, Josh. Thanks for coming on. This was a very fun conversation going into all the things that you've produced. And those, all those things are so good. So, thanks for coming on. Josh: I appreciate it. It was my pleasure and I really appreciate the invitation. It was great coming to chat with you both. Justin: Yeah, it's such a pleasure. Really enjoy your work. It's delightful. Keep doing delightful work. The world is better for it, and thanks for coming on. Josh: Appreciate it. Bye everyone.