On today's episode, we chat about the mental models that can help you learn and master React. Our guest is Cassidy Williams, a Principal Developer Experience Engineer at Netlify. We also discuss the video games that are getting us through the pandemic and the strange experience of doing team meetings in virtual reality.
You can check out Cassidy's course on React here. It will teach you how to "build a reusable and declarative React component library. It's perfect for developers who are looking to build a scalable design system for their team and product." If you're not in the mood to subscribe, Cassidy would recommend Free Code Camp.
There's lots of info about Cassidy's various projects at cassidoo.co. You can catch her coding live at twitter.com/cassidoo, Thursdays at 12:30 PT/2:30 Central/3:30 Eastern.
Sara made it to the ending credits of Hades, so you know she's a fan. Cassidy is excited for the latest version of Stardew Valley and has been impressed with Half Life Alyx and the Valve Index VR headset.
Sara Chipps Does Jam Stack Conf have breakdancers or no?
Cassidy Williams I'll make it happen.
Ben Popper Couchbase is a modern, multi-cloud to edge SQL friendly JSON document database for building applications with agility, performance and scale. If you're new to Couchbase, and would like to learn more, the Couchbase Developer Portal is the best place to start. It's loaded with tutorials, videos and documentation, as well as best practice tips, quickstart guides and community resources, including the Couchbase Developer Community Forum. Ready to get started developing on Couchbase? Visit couchbase.com/newtocouchbase.
BP Hello! Good morning everybody and welcome to the Stack Overflow Podcast. I'm Ben Popper, Director of Content and I'm here today with my co-hosts, Sara and Cassidy! Surprise! It's not Paul, it's Cassidy.
CW Ayeee! Hello.
BP Hi! Cassidy Williams writes our newsletter, she contributes, she's a big contributor, helped us get that thing off the ground, and now works at Netlify, right?
CW Yeah! Uh huh.
BP For folks who don't know, tell them just quickly, what is Netlify? And what does it you do there?
CW Netlify is a place where you can host websites. And it has all of like the built in features where if you want to run a script, while you're building your website, if you want to host a React project, an Angular project, any kind of projects there, it has serverless functions built in and a bunch of other features to make web development easy.
SC It does make it easy. It's my default, like, here's a new project, get it up and running.
CW Yeah, you don't have to configure just tons and tons of stuff to make things just work. And it's great.
BP So it's great for sharing a project? Or are we talking like full on, I built a product that you know, it's gonna be my business, too?
CW Yeah, both. Yeah, we have quite a few enterprise customers that builds their whole sites on Netlify, and then we have plenty of hobby projects as well.
BP So today, I thought we'd kick things off talking a little bit about React. And I saw a few pieces floating around the web to inspire this conversation. And they were sort of some variation on how to think in React or a visual guide to React or something that is along the lines of like, your brain isn't quite grokking this, here's like a way to sort of visualize it or get it. Cassidy, I know you have some thoughts. So like, if somebody came to you with this question, they were either just getting into React, or they work in a totally different, you know, kind of programming. What would your advice be?
CW Yeah. And so, I could talk about this for a long time. So I'll try to keep it concise, but also somewhat thorough. So with React, there's, I'll even go back, with the web. There's the DOM, the document object model. And that's where if you go to a website, there's always this tree, in in your web page where it has a head, it has a body, and it has all the different nodes, you might add in there, headers, divs, paragraphs, anything like that. And what React has it has what's called a virtual DOM. And the virtual DOM works with the browser DOM to make it easier to do development in the DOM. I'm going to use that word a lot, DOM, DOM, DOM.
SC How does it do that? So like, I just think in the DOM, tell me about the virtual DOM. What does that do?
SC Whatever you gotta do.
CW Whatever you got to do just make it at 72 degrees. And it'll handle that. The virtual DOM does that in React where when you make the changes, you say, Okay, I want this state variable to be what's applied to the DOM, I want this number to be what's happening here in the DOM, it makes those changes for you. And so you don't have to do the thing where you get the value, parse the value, change the value, you just have the value and give it to React. And it puts that in the DOM for you.
BP Is that where the name comes from? Is this like, it's Reacting to, you know, you set some parameter, and then it like, Reacts to that like a setback thermostat. Right?
CW Right. Yeah, exactly. It's very aptly named.
SC So for this virtual DOM, what it sounds like, it's, it's an abstraction of the DOM that works maybe a little bit easier, or something that listens to the rest of the DOM a little bit better?
CW Yeah, it's basically a diffing tool, kind of like if you if you're using Git, and you make some changes, and you say, okay, git diff, you see just the lines that you changed in your code before you can push it, it's the same thing where the virtual DOM will say, Okay, I'm just going to do a diff here. That's the thing that has to change and adjust diffs that, rather than if you wanted to make a change in the DOM, you kind of have to do a repaint of the whole page with the virtual DOM, adjust repaints the parts that matter.
SC Oh, very cool. So with thinking and Reactors, you say that it gives you a little more freedom, you don't have to think so step by step? That gives you a little more freedom to be creative?
CW Yeah, you can think more about your logic and what you want your app, your blog, your whatever you're making, you can think about how you want that to work, rather than how it will work in the browser.
SC That's great. How long have you been doing React? What do you what do you like the most about it?
CW I've been using it for a long time since 2014.
SC Wow, that's forever and programming world!
CW Exactly. So I have seen lots of changes in React and and what's been kind of cool is just kind of the shift in thinking and how it works. Because when it first came out, there was a lot of imperative little things that were snuck in there too, just because everyone was still using jQuery, and backbone and all of these things. And it's slowly moved to a more functional programming paradigm, which is very cool. And so we started with class based components, where we have a component lifecycle method, and you can get pieces of the DOM and adjustment and stuff if you wanted. Now, it's much more functional programming style, where you have a state variable, you make the changes that you want, and those changes are applied to the DOM and your functions are much smaller too.
SC I've been watching recently, things like React components come out. And when it comes to things like that, would you say that back end coding is very used to how we traditionally think about the DOM? So would you say that is something that is more React--like, are we going backwards? Like, are we going in the back end to make things more React friendly? That's kind of the vibe I got from things like that.
CW I feel like now we can just be more modular in general, where, as a front end developer, I can say, Okay, I just want this information, give it to me, however you want, I'll be able to parse it. And so the back end doesn't have to think about the DOM or about the browser or anything, it just says, Okay, this is the data that I want to be able to pass, go. And I think things like graph qL, for example, make that so easy to be able to just say this is all the data I want and go and it kind of empowers both groups of people, because it makes wiring things up very easy, because you can program it how you want. And I don't know if you've heard of the concept of the jam stack?
SC Yeah! It sounds like a party stack.
CW It does! And we're jamming on things. Yeah. And that it's, a lot of people are just like, Oh, is that a technology, but it's more like a programming paradigm where it's all about the separation of concerns and stuff. And I think having that separation, it's great, because let's just say you, we have our back end, and it's in Ruby or something and you want to switch it to go or you want to switch it to rust or something like that. It doesn't matter to me as the front end developer, you can do whatever you want, as long as I can get my information. By having that kind of separation, I feel like React was a really good kick start to that style. And now just not just React and and front end frameworks. But all of the technologies can follow that now because they're powerful enough on their own without having to be very intertwined.
CW Yeah. It's it's amazing like the the fact that I can not only set up a CMS but also a full like Postgres database, and have all of these things while it's still is comfortable to me as a front end dev. Yeah, it's awesome. And and that's something that I probably wouldn't have been able to do six, seven years ago.
SC Very cool.
BP Cassie, you were you were gonna go on the road and teach this stuff? Is that why you seem to have an elegant way of explaining it and have thought these questions through?
CW Yeah, so I taught this full time I was at a company called React Training. So, also very aptly named. And yeah, I was I was teaching that all over the country. I taught internationally as well. And then the pandemic happened. And unfortunately, training budgets kind of went out the window and also travel went out the window. And unfortunately, we had to lay off all staff and so React Training was no more and that's how I ended up at Netlify.
SC Hot take. What do you think's going to happen at conferences after the pandemic?
CW I'm so curious about that. Because I'm I'm getting requests for in person conference speaking.
SC Are you really right now?
SC Like when? Like later this year or like now?
CW Yeah. For later this year.
SC In the environment?
CW I think the earliest event is environment June, and I'm kind of like, well, you know, that's very optimistic. Like, I would love to go to to Paris. I just, it doesn't feel real. So yeah.
BP Like does it come with a vaccine shot. Or how does this work?
CW I know? Right? Yeah, I basically have said, you know, if I have the vaccine, yes, absolutely. But I have no faith in this right now.
SC Yeah, Cisco is getting vaccines in the Expo Center.
CW Yeah, truly, I don't plan on just because I think I'm one of the last people who could get it because I don't have pre existing conditions and stuff. So I don't think I should be one of the first people to get it anyway. I don't think I don't expect to get it until August, September at least. If that. And so I appreciate the optimism that these conference organizers have. But I don't see that happening. That being said, there are a lot of like conference platforms that have been improving a ton.
SC Like what? Have you been to a conference that was, you're like this is well run, it's on the internet.
CW Yeah. Hoppin s a really great platform, that we've been using. And for example, Netlify, they organized Jamstack conf. I went to a conference called You Got This Conf, where they built their own little platform, and it was mostly just a YouTube Live, but with Discord chat attached to it and stuff. There have been a few really nice platforms that have been made. And some have been overkill. Some haven't been some have been awesome. It's been quite the spectrum. But there's been enough innovation in that area and enough ideas saying like, Okay, how would you handle live captioning? How do you handle chat moderation, so that way, bad chats don't go next to the speaker and stuff. And so I'm cautiously optimistic about all of these, all of these virtual events coming to be and I'll be very curious to see if those keep up because on one hand, accessibility has been so great to people who wouldn't normally get to. Yeah. So that part is really, really nice. But at the same time, you kind of miss the hallway track, where to actually talk to people in between the talks and hang out afterwards and stuff too.
SC Yeah the bath bombs in the Expo Center.
CW Yeah. [Cassidy laughs] It'd be so great to be able to have some kind of hybrid world for that. And I'm not sure what that would look like.
BP It's called clubhouse, you just you just jump into a room, have a chitchat, take it offline. But yeah, I do think that that's one of the challenging things is like, when you go, I've been playing around with clubhouse for a little while, and I haven't really found anything that clicks for me. And it feels like I'm going into these conference rooms at CES, where somebody's giving a presentation. And it's mostly self promotional. And then everybody's just trying to like, shoot their shot and get there, you know, one minute, and there's not a lot of conversation, I guess. And so that's the hard part. It's like, you can have a presentation. But then how do you break that down? Like you said, into the conversation or the follow up or like the serendipity of meeting people? That's what's hard in the virtual, the virtual world.
CW Right. And I've tried to do that. Like, for example, there, there have been, again, some conferences where the chat is all in Discord. And so I'll dm people saying like, Hey, your talk was awesome. Or, hey, I thought that was a good comment. Like, I'll try to have that and it works. But then some people are just like, Okay, thanks. And it does, it's not really the same thing as being able to go up to a person and talk to them. So we'll see how that improves over time.
BP And then there are these weird, like, knock on effects. You know, my kids haven't been to school all year. And so none of us have gotten sick. Like we used to get the stomach flu all the time, you know, oh, yeah. The bugs going around. It's you just get it now. nothing, not even yet because they're wearing masks and they don't, you know, they're socially distant. And I was thinking about conferences the other day because I had to do this like cybersecurity training. Like think about how, it used to be there's all this physical attack space like somebody tricks you, they get into your office, you go to a conference, you go out for drinks, like that's all gone. All of it's gone. It's all virtual. So I just wonder like, yeah, maybe this year there's just been way, way less intrusions you know, like things change that you don't even think about I guess.
CW There's also unfortunately, a different kind of intrusion that happens though, because when things are online, anonymous trolls and stuff can appear.
SC Oh yeah, it's a lot easier to be a jerk.
CW Yeah, the unfortunately like moderation of these events is very difficult. Yeah. Especially when like, you'll say, Okay, well, we'll just block you from the event and your name and stuff. We don't know if it's actually their name. They can make a fake account and join in again.
SC Just come right back, yeah, yeah.
CW And that's been a struggle sometimes.
SC I've seen you do a lot of Twitch coding. And just like Twitch in general, that's a platform that's been thriving. What's that been like?
CW It's been pretty good. I do it on Thursdays.
SC Yeah, plug, what time? Or do you do it differently?
CW Usually, I do it at 2:30pm Central, and so 3:30 Eastern, 12:30 Pacific. And what's been interesting is I thought I would just make it like a straight coding stream, where I'll work on something and explain the logo and stuff. But it's kind of turned into, like the first half is almost always just Q&A. And there's a lot of just newbie developers who don't normally get to talk to people and stuff. And so they're chatting amongst themselves. But also, they can say like, Hey, what about putting this on my resume? Or how do I ask for a raise? How do I deal with this and stuff. And it's been a, it's been a nice little community there and not just on my channel, but on others. A lot of people have been doing kind of that q&a thing where it's just chatting with people. And it, it almost feels like a conference, but not where you can just get to know people on the internet a little bit more. And so far, knock on wood has been very wholesome. And I hope it stays that way.
SC I watched you play Fall Guys. I was cheering from, I was cheering from home. It was so fun.
CW Thank you, that was you know, that was rough. [Cassidy laughs]
SC That's great.
BP Yeah, that's really interesting. I think people are doing that. And it's kind of like you're saying they're trying to carve out that space for the more casual interaction, right. So like, the live stream is the event, but then it's like, if you come hang out, usually we're just chit chatting for the 20 minutes before it starts or whatever. And that starts to get around. That's very cool.
CW Yeah. And it ends up being more like co-working and stuff, too, because I'll be chatting with them. And a lot of people just like, yeah, it's kind of like being back in the office again, there's just someone talking about code nearby. Yeah, I like being able to provide a space like that for people.
SC That's nice. Yeah.
BP So something happened this week. And we'll see how long it lasts. But a developer created a mobile friendly version of Stack Overflow. Is there really, is there a need for this? Is this something people are like on the bus? And they need to look up the question? I mean, obviously, now that in pandemic times a lot less because we're all just home with our desktops, I guess, but I don't know. I'm not sure we need this.
CW I'm very curious about that, too. Because, for example, we've gotten some requests on Netlify. Like, a lot of it is very mobile friendly. But who's deploying websites from their phone? I'm not against the concept.
SC It seems hard.
CW I'm curious why. Very curious. Like, what where's this coming from? But I could see like, from that perspective, I could see being coming home from work or walking around or something and trying to come up with a solution to a problem and then suddenly being like, wait, maybe if I just googled this, I'll get the answer. And being able to do that on the go?
SC That seems very dangerous, though, like I've definitely thought, and what would have happened, I would have broken everything and then walked right into my nail appointment. Three hours later, everyone's like, "where were you?"
BP Just going to turn this on silent and head into the mani/pedi.
CW And I don't know if that just makes me like an old Grinch to be just like, people don't do that on their phones. Maybe people do. And yes, I personally haven't seen a use case to be coding and doing stuff like that.
SC Yeah, coding circles and Mark Zuckerberg's basement. That's where you need that.
BP This is the joy of of doing public speaking is you could say that, and if you get it wrong, nobody will remember. But if you get it, right, you can point back in 20 years and be like, I was so right about this.
CW And just be like "I did that."
BP But I think that's right. Yeah. And 10 years, it might just be like all the kids who grew up with, you know, their only device was their phone or their tablet that they had, that's where they did it. They like figured it out. They learned to do it their native that way. And so that's just how they do.
CW Yeah, I mean, we've we've seen stuff with like, TikTok and everything, the youths, they're doing something different. Even like I have a younger cousin who's still in high school and stuff. And hearing how he uses his phone is very interesting to me. And like for example with me, I try to keep my screen time relatively low just because I stare at screens all day. And meanwhile, his screen time on his phone. He's just like, I was 11 hours a day this week. That's a lot of time.
SC That's so much time. He needs a job. You need to get a job.
CW That's the thing. He has a job. So I'm like, where do you have time to do this? What are you doing on it? Because it's he's not posting on Instagram, he's not posting on any social medias or anything. But he's on his phone this whole time. Is it just texting? Is there something else I don't know about? It blows my mind.
SC Yeah, this whole secret social platform that we're not aware of that the kids are on. That's truly my nightmare.
BP That's where all the good memes are happening. We just don't know about it. Yeah. When you look at the young, the young person's home office set up, they have like, you know, the stand that I have in my car, and it just holds the phone, the phone is always open. Just like a hand scrolling at all times over here. Constantly.
CW Yeah, I've seen that there's actually like a neck strap thing. You could, like, sit on the phone in front of you. I'd like I've seen videos where it's like someone drinking tea while looking at their phone and then they'll like, tap it and it just holds up their phone for them. And no, it starts as a joke, but it's very real.
SC Ben, do your kids have phones? Are they too young?
BP They're too young. We sometimes we give them like our old phones, like you know, stuff that we got leftover if we're going on like a long car trip or something and we just put a few safe things on there. You know, like Spotify kids, which is like all the music of Spotify that doesn't have curse words in it. You know, like a few Minecraft and Roblox and stuff like that. Actually, Roblox is kind of dangerous.
SC Is it? Yeah, I've heard that.
BP So like Roblox is kind of deceiving because it seems like this fun and cute little kid world, it looks kind of like Minecraft and Lego. But the reality is anybody can design a game, make it whatever they like and just pop it into the store. And if it's if it takes off, it kind of comes to the top so the kids are likely to see it. So the games are like, you know, jump off a cliff and count how many bones you break and we're just like, why are you playing this? This has no redeeming value at all, put that away. So playing Roblox could mean your playing--it's like going into Steam, like you could be playing one of 1000 games. Roblox is not the game. It's like the library basically.
SC Oh, got it, very wild.
CW Have you been playing any games? Either of you in the pandemic that have just consumed you? Because I've played many.
SC Yeah! What have you played? I just finished Hades. Hades is the one you think you beat and then there's like, actually years left, you need to play but I finally got to the ending credits. That felt good.
CW I feel like everybody's been playing Hades. I want to try it. But I'm also just like, will I get anything done if I start? Probably not. I've just been so into Stardew Valley. Like, that game is so good. And the newest version just came out with like, all new cutscenes and a bunch of new stuff. And it's supposed to come out on Switch, like this week. And I'm very, very excited.
SC Oh, I need a new game.
CW Yep. It's coming. It's coming. But I also picked up Civilization. Have you played that one?
CW It's dangerous, but so fun. Because it's just like, Oh, just one more turn. I'll just play one more turn. And sometimes those turns are two minutes. Sometimes they're 10. And you build your civilization and it is so fun.
BP Are you a science victory? Or are you more of a military victory?
CW Oh, science. I don't like fighting. I lose all the time. I haven't figured out any strategy where military will ever work for me. We also we also just got a Valve Index. And so we've been doing VR games.
SC Oh, is that like an like a different Oculus?
CW It's Valve's version of the Oculus.
BP Does it room scale? Do you have a little thing you set up? Or how does it work?
CW We have two like sensors that we put in the room. And then what's cool is I don't this might be on other ones. I haven't had a VR set before. But it tracks your fingers as you hold the controllers and stuff. So you could point at things and stuff. And I started playing the game HalfLife Alex, on there.
SC Oh, what's that?
CW So I haven't played other HalfLife games before. But it was such a realistic game that it kind of freaked me out. Because you can like grab a marker and draw on a whiteboard or like wipe it off with your hand and keep drawing. And that was wild to me. And like, Yeah, I was I was streaming it to some friends. And I like said, Okay, well, here's a binary search tree. And they're just like, no, it's an interview now! But like we're able to do all of that stuff and in the game and throw a bucket and put a bucket on your head and walk around and stuff. But the moment I got a gun, that's when it got a little too real for me because oh, now oh my gosh, I can hold it and like they could visibly see me shaking like in my stream that I was doing. And yeah, I didn't I didn't actually get to the monsters part. I would just like see a light bulbs shake. And I'd be like, Oh my gosh, and shoot it. It was a little too real to have that in my hand. And so I didn't I have not gotten far in that game.
SC You can stream with it?
CW Yeah, you can put it, put it through the PC and seeing the streams. It's a really impressive game. They make it very intuitive. And once you learn the controls, you feel like you have superpowers, you can do it. But you get so immersed. My husband's been playing it and he plays a lot more than I do. And there was one point where he played for a while, like two hours and he took it off and I could see him like he almost dropped his phone because like his perception, his depth perception was just a little off. And I was just like, hey, come over here. And he like, tapped his hand as if he was tapping a controller to teleport to me. And I was just like, you'd need to not play for that long. That is trippy.
When come out of that when you come out of the cryosleep, you know, it takes a little while to readjust to being normal. Why hasn't this stuff taken off for all of our--I mean, you were saying like, people immediately thought you're meeting. Why hasn't the VR AR taken off for all of the virtual work we're doing? Is because it's so expensive?
SC Yeah, no, where my partner works. Everyone in management and above, got an Oculus this year, and they all meet in VR.
SC Isn't that wild?
CW That is wild.
SC They have little cartoon avatars.
CW Yeah, I saw one company. They did that too. I think it's just remote.com, like they do remote work. And they were saying, Yeah, everybody gets an Oculus. And they'll sometimes do meetings in some chat room, or sometimes they'll just play Call of Duty together and talk during that. And that's fascinating. And I wonder if that's going to take off? Or if it's just kind of like a pandemic gimmick or what?
SC Yeah, it seems weird. Like, I don't want need to see people's cartoon avatars? I don't know if I'd like it. Maybe I'd like it. I don't know.
BP Yeah, I mean, the thing is, what you want is like the ambient awareness where it's like, we're all in the office together. But then sometimes we can just chit chat or whatever. Whereas like, when you decide to get in the VR meeting, it's kind of like, okay, we've decided to come together as cartoons and talk about work. Like you're saying, Yeah, Cassie almost works better, where it's like, we're playing a game, but we can all see each other. And then we can talk like, let's have a stand up. Right? Like, sort of incidental.
CW I think that's why games like Among Us are so popular, because you're kind of you're talking with your friends. And granted, you might be killing your friends and lying to your friends. But it's you're you're kind of gabbing with each other and getting to know each other still, while while also playing the game.
SC Yeah, we have team among us once a week on Stack Overflow Community team.
CW Oh that's so fun.
SC Yeah, it's really fun. The Some of us are very good. Some of us are very bad. I'm in a very bad group.
CW Oh, we played with was my coworkers last week for the first time. And I didn't realize how much of a liar I was and how they weren't used to it. And it was it was very fun, because I was just like casting who didn't expect you to do that. Because it was very fun. Because I was I was the killer. And it was down to three of us. And I needed to figure out how to kill the last one because they were starting to suspect me. And so I've just waited until we were all like in a column and I killed one. And I immediately was like, he did it. He did it. And so we voted for him. And I won and I was just, oh, it's the most sweet victory. But now they're just like, "I don't know if I want to play this with you anymore."
SC We had no idea you were so evil this whole time!
BP Alright, everybody. It is that time of the episode, I'm going to shout out a lifeboat badge winner, say thanks for taking a question with a score of negative three or less and getting it up to a score of 20 or more. Today, awarded 16 hours ago, to Katriel: are Python sets mutable? You'll have to check the shownotes to find out, but seems like there's a great answer here. So thank you to Katriel. I'm Ben Popper, Director of Content here at Stack Overflow. You can find me on Twitter @BenPopper. Hit us up firstname.lastname@example.org with ideas, suggestions and questions.
SC Great, I'm Sara Chipps, Director for Community here at Stack Overflow. And you can find me @SaraJo on GitHub.
CW I'm Cassidy Williams. I'm on the developer experience team at Netlify and you can find me @cassidoo on pretty much everything.
BP Sweet. And we'll put your Twitch on there maybe if you want people to come check out the live coding.
CW Oh yeah! Cassidoo.live!