[00:00:36.04] SD: Hi, I'm really excited to be here, my name is Sarah Drasner, I'm a Vue core team member, I'm cloud developer advocate at Microsoft, and I also work at CSS Tricks as a staff writer and sometimes editor.
One of the best parts of being a coder is finally being able to bring your passions to life. You have the skills to design, to code, to create the thing you're excited about, and share that passion with the world. And Hover can help you with the first step, of sharing your passion with the world - getting your domain name. They've got a really beautiful and easy to use interface where you can find and register your new domain name in just a few steps. And to give you full control, they separate your domain name from your hosting, so you're never stuck with one service. They keep your domain name safe while giving you the flexibility to use whatever hosting service is best for you. They also give you free "who is" privacy, so your personal information is safe, too. To get started, go over to Hover.com/newbie to save ten percent off your first purchase. That's hover.com/newbie. Link is in the show notes. (Music)
[00:01:47.09] I'm so excited to have you on, I've been a Twitter fan for forever, and I DM'd you and I was like, maybe Sarah could make time for me to be on my show, and you said yes, and I'm so excited this is happening!
[00:01:59.25] SD: Oh, the fandom goes both ways. I was so excited that you reached out to me - I feel very honored to be on this podcast.
[00:02:05.16] SY: Oh, awesome, awesome. So you do a bunch of different things, you're an award-winning speaker, as you mentioned developer advocate, Vue.js core team, writer for CSS Tricks, you also co-founded a web animation workshop thingie, you're always talking about SVGs, you're like an author - like an author-author - as well. You're super busy, you've got a lot going on.
[00:02:25.01] SD: Yeah, I try to keep busy. I actually just really, really love coding, so it makes it pretty easy for me to do those kind of projects because I'm just doing stuff that I love all the time.
[00:03:04.14] SD: Yeah, so Vue.js is called a progressive framework, and part of the reason why it's called that is because you can adopt it in a lot of different ways, you can adopt it just like you do jQuery, where you add a script tag, and you just start coding tiny pieces of functionality, you can adopt it by incrementing things into these bigger script tag blocks, you can use vue-cli, and drum up an entire build process with web pack included and all of the bells and whistles. So it's very easy to integrate into projects or just like use very lightly as well. It's got the same weight as something like jQuery, so it's not a huge - you know, sometimes it feels like taking a deep, big plunge in order to work with something, Vue is kind of set up to be a little bit more flexible.
[00:03:49.14] SY: Very nice, so what are some things that Vue can give me that maybe I don't want to build on my own?
[00:06:11.10] SY: Yeah. Can you walk me through a really simple example of what it might look like in jQuery and what Vue does differently?
[00:08:31.09] SY: So you're "listening" to attaching yourself to the result, not the ingredients, and keeping an eye on the ingredients.
[00:08:40.02] SD: That's right.
[00:08:40.16] SY: Ooh, that seems way more efficient, why doesn't everybody do that?
[00:11:13.27] SY: That's a good idea!
[00:11:13.09] SD: Because I work a certain way, my brain works a certain way, someone else's brain might work another way, and a lot of these frameworks are so similar in some ways, that when you really come down to what you should be doing or what you want to be working with, it helps to have that experience yourself.
[00:11:32.13] SY: Yeah, absolutely. And do you feel like four hours is long enough to get a feel for it and make a decision of whether or not you want to stick with it?
[00:11:41.17] SD: Not exactly, but at least that's not a huge time sink for some who's trying to get a job -
[00:11:46.21] SY: That's true.
[00:11:47.17] SD: Or who's trying to learn a marketable skill. I think if you can invest more time, definitely do - they're very interesting, I've invested more time in learning multiple frameworks for sure. But if it comes down to something like I need to get a job, I need to pick a framework, I think that that's probably a good direction. Really four hours won't give you a full sense of the framework, because first of all at scale you'll see all sorts of things that you wouldn't have otherwise, you might not know how to - for instance, Vue has a thing called watchers, which I think is super awesome, and it's a way to plug into that reactivity system. Usually in four hours you won't get there, right, it's a kind of more advanced topic, so you might not see some of the things that might make something like Vue shine. But you will get a sense of how it handles some of the syntax, some very basic things.
[00:12:53.08] SD: Yeah, I kind of say, this is one of my least favorite questions, not that we shouldn't address it. I think it's really valuable to address it. It's just because I feel like I like both, and I don't want people to think that they're doing wrong by going for either. I'll talk about the things that I really like about both. React has an amazing community, it has a huge ecosystem, if you are interested in working on something, there's probably a project in there, and they're probably taking contributions, and there's just like a lot of excitement, there's a lot of conferences, there's a lot of stuff around React. I think one of the biggest things that React has to offer that Vue kind of has but not in such a formal way is that React has React Native, which allows you to make one base way of working with React, and then it also works for mobile applications. So that's really cool. Vue has a similar thing, you can work with a number of different frameworks to create that, but it's not as formalized as React Native. Vue is a little bit younger than React, and the reasons why I like Vue so much is that I feel like what it did, and this isn't even that subjective, is that Evan You, after all of these other frameworks, Angular and React and Knockout, so on and so forth, had come out, he kind of purviewed the landscape, and he said, what works from all of these frameworks? So he kind of took some things from each one of them. He's using in React, it's just the view, it's not a model view controller like Angular, he kind of took that from React -
[00:14:25.14] SY: Is that why it's called Vue?
[00:14:26.29] SD: I think it's a play on words for that, but you'd have to ask him.
[00:14:32.13] SY: Oh my god!
[00:14:32.29] SD: Yeah, I think that's why.
[00:14:34.21] SY: My mind is blown. That's awesome. Ok, sorry, go ahead.
[00:19:05.15] SD: I think some of the things that I take into consideration, because I can't really speak to anyone but me, I always check out the dev tools, that's a really important thing to have because you spend a lot of time in there and it kind of allows you to understand the framework in a deeper way and know how you're working with it. I also pay attention to how people are in the community in terms of are they making a lot of advancements, how's the documentation - documentation for me, this is also kind of a biased thing, I work on docs, but I also work on docs because I really believe in them. So good documentation for me is worth its weight in gold. Because that's where you're going to live your life when you're working on a framework, is to try to understand it through the way that people are expressing it, so that tends to be another big one for me. There's a number of things to look out for - I'm quite excited by the fact that there's so much opportunity in Vue right now, because it's kind of like, it's a newer framework, the community is newer, there's just a lot of opportunity to jump in and contribute and there's no right answer and it's kind of malleable how much you want to contribute to that community and make a name for yourself. So I think that that's pretty exciting. Yeah, those are all things that I consider when I look at a framework. I also get plunged into, if you can do consulting, you get plunged into a larger code base which is kind of helpful because you can see it at scale at production, which is something that you can't really see when you are first starting to learn it.
[00:21:31.14] SD: Oh, totally, I don't do it in a very formal way, personally. I'm kind of into this passion-driven development idea -
[00:21:41.07] SY: I like that - is that a thing? If that's not a thing, that should be a thing.
[00:21:42.20] SD: I think Chris Coyer was the first one - he's my boss at CSS Tricks - I think he's the first person I heard say that. But I could be mistaken. It's kind of the way that we write CSS Tricks articles, to be totally honest. It's not like we're like, ok, let's go through the spec, you have A through E - it's kind of like whatever, we write articles on whatever we're curious about that week, or whatever we want to do a deep dive, I'm like should I cover this or this, and he's like, do the thing that excites you more, and I'm like oh, that's great. It's - typically, the articles come out better if it's something that you're excited about. So kind of going towards the things that make you curious, make you excited. I tend to be a very curious person, so I'm exploring all sorts of things all the time, which is why I'm kind of all over the place. But you know, deep diving into something is totally legit. It's absolutely, totally fine - you don't have to feel like you have to sample everything. In fact, when you do get a production-level job, they're not going to have you working on five different frameworks, they're going to say, we have a React stack, we have an Angular stack, we have a Vue stack - and that's the thing that we're going to work on. So it might be that the job decides that for you, in some ways, which doesn't mean that you can't explore a bit on your own.
[00:22:58.27] SY: Yeah, and actually that's really good advice - maybe start with what are the jobs that you want, what are the roles that you see posted, what are the companies that you want to work for, see what stack they use, and maybe use that to help make the decision a little bit easier.
[00:23:13.06] SD: Yeah, except that there is a caveat there, because some of this is skate to where the puck is going, so I would say, a couple years ago I was working at a company and we really wanted to adopt React, but they were like, no, Angular is the big one, React is never going to gain adoption.
[00:23:30.25] SY: Oh, wow.
[00:23:31.01] SD: So for a long time, they held out and wouldn't let us use React, and eventually as React grew in community, then that kind of changed. But now I'm seeing the same thing happen with Vue, where people are like no, React is the one that has adoption. So I would say that that stuff, I wouldn't bank too much on that stuff, I would also look at things like a lot of people put out surveys and things like that - look at the stuff that has growth, growth matters just as much as adoption for that stuff. And go to stuff that you're interested in. I think that there are enough jobs out there for developers of all kinds that you probably could work on whatever framework you wanted to, and be happy and find a job. (Music)
[00:24:16.27] SY: Coming up next - we learn more about Sarah herself, and how she got started in tech. It's pretty awesome - she used to be a science illustrator, among other things. She's also got some really great answers to our fill in the blanks - after this.
When I learned to code, I was so excited to finally bring my passions to life. I could build things that I really cared about, and share them with the world. And the first step in sharing is getting a great domain name. That's where Hover comes in. They've got a really slick and easy to use interface, they've got awesome domain names to pick from, and they separate your domain from your hosting so you have full control and flexibility over your online identity. So go to hover.com/newbie to save ten percent off your first purchase. That's hover.com/newbie. Link is in the show notes.
[00:25:04.15] So next I want to switch gears a little bit and talk more about you and just your story and how you got started. So we started this conversation by listing all the awesome things that you're doing and all the stuff that you are involved in. How did you get started in tech?
[00:25:22.09] SD: So it was about fifteen years ago now or something I was right out of college, and I was working as a thing called a scientific illustrator. I worked at the field museum of natural history and I drew dead lizards and snakes and amphibians and reptiles for a living, so for encyclopedias, for science journals, and things like that. And part of the reason why they have people who draw those things is that when you have a camera and you take a picture of a snake or a lizard or something like that, there's a depth of field - there's a thing called an aperture, so there's parts that are in-focus and parts that are blurry. So when you do a drawing, everything can be in focus, so they kind of valued that ability.
[00:26:11.11] SY: That's such a good point - I never thought about the benefits of drawing in that way before, it's like a very technical benefit to illustrating versus photography. Interesting.
[00:27:29.19] SY: Good for you, well done!
[00:27:30.04] SD: I'm always kind of like that, I guess. Yeah, sure, I can do it, and then just try to figure it out. So I picked up an HTML for Dummies book at the store and I made my own website that week, just building things out of the book to practice, so then I started working on that project and at the time there was a thing called a webmaster, which is like a person who's in charge of that place on the web. She kind of took me under her wing and was like ok, this is how we do industry-quality websites. So I'm really grateful for her to have done all of that pair programming with me. So yeah, I started websites, so the first two were aquatic snakes of Southeast Asia, and the next one was about millipedes, I think, then it was about goose barnacles, so I made all these crazy random sites. It was really fun, but then I decided that I wanted to go back to grad school and become an art teacher, and while I was in grad school I was low on funds, so I continued to use those skills to make sites for places like Stanford and UCSF in my spare time, so I was still trying to make some money doing that. I become an art professor in the Greek islands, and -
[00:28:52.02] SY: Really? That's so cool.
[00:28:52.12] SD: Yeah, I was a study abroad professor for four years in the Greek islands - I used to take students to Greece and Turkey and all over the place, to different islands every week and teach them about history and stuff -
[00:29:06.19] SY: That's awesome.
[00:29:06.19] SD: Yeah, again, I wasn't being paid very much so I was still making sites on the side. When I moved back to the US, I took a web development job at an agency, and that kind of kicked off really focusing on tech work.
[00:29:18.09] SY: Interesting. Wow, you have such a fascinating backstory.
[00:29:21.25] SD: Thanks!
[00:29:22.24] SY: So at what point in that journey did it go from I'm doing this for money and I need to pay the bills to, oh my god, I actually really love this and I'm passionate about it.
[00:29:34.21] SD: Oh yeah, totally. When I was at the agency, when I first started there, I think that was to definitely like make money, and it kind of like a bootcamp kind of thing, where it was like, we had to clock out to go to the bathroom and if we coded a newsletter in one minute more time one day than another we had to say why - it was very like -
[00:29:53.29] SY: Oh wow, oh my goodness, that sounds really stressful.
[00:29:56.23] SD: Yeah, it was stressful - I also leveled up really hard there, because you just couldn't help but not -
[00:30:05.19] SY: You're not allowed to -
[00:30:06.25] SD: Yeah totally. So that definitely helped level up my skills, but I do remember there was one time I was working on a project for a big tech dude's wife wanted me to build a site for her. And it was like a passion project for her, and it was about fairies and it was really goofy, but we were making a good amount of cash on that one, so I took my work home that night and was experimenting with some new kind of things I could do with CSS to bring that site out, and I was supposed to meet my friends at this club to go see this band play, and I called them and I was like, I can't come out tonight, I'm sorry. And I just kept coding and coding into the night. I think that was the first time I remember feeling like, wow, I am having a blast. This is just the best. So that was kind of the start of my journey, of just poking around and seeing what was possible.
[00:31:05.28] SY: Has that passion ever faded or waned at all over the years?
[00:31:14.20] SD: Yeah, I think there were a couple points - I'm a very excitable point and I'm very curious, and I'm totally into exploring. Unfortunately, there's time when, if you're a really hard worker, you can start to burn yourself out and you can maybe agree to too many things. So there was a point where I was doing a lot of work for giant component systems and big production sites, where I just started to feel like a code monkey. Like I just started to feel really like, ugh, this is just me working on a big system and constantly fixing other people's bugs and constantly triaging things and it got very far away from the stuff I thought was exciting and I think the way that I pulled myself out of that was I found SVG animation, so SVG animation, I started playing on small projects - which were so different from my job. My job was very much like grunt work, and on the weekends, I was doing these silly little cartoon experiments and more fantastical, or just trying to see how animation worked, and that for me created these dopamine rushes that I'd been missing. If you're burnt out and you go on vacation, you come back and for a little while you feel better but you can kind of slip back into not feeling so great. So working on something that was for me and my own project and was just like for me to experiment and find something that I loved, really actually did more than even a vacation could do. I just felt continuously like yay! And so that kind of helped me turn that around.
[00:33:02.03] SY: Yeah, and I don't know if you experience this, but for me, the other part about burning out is - you know, I think when we talk about burnout, we focus very much on oh, you're working too hard, or you're spending too much time working, you need a break. But I think the other side of it is, we're just getting older. I think that's part of it too, like I can't pull the multiple all-nighters I used to in college, I can't just live off of espresso shots, I actually have to stretch now, I have to take breaks, and I have to do things not simply because or only because there's more work to do or I'm working all the time, but just because my body has different needs now than it used to have years ago. So I think that's the other part of it too, that it's work but it's also just your physical needs change over time.
[00:33:51.18] SD: I think also, I think about this a lot with people who have kids. I don't know how they do it -
[00:33:57.27] SY: Oh my god, thank you, I think about this all the time - every time I complain about how tired and busy I am, I just think to myself, oh my god, what if I had a kid? At this point, if there was a small child dependent on me and my husband for food and pooping, I don't know what we would do.
[00:34:15.03] SD: Totally, totally. The people who do open source or the people who are still coding while you're taking care of children - I've got to just do a little shout-out for you people.
[00:34:25.16] SY: They are heroes.
[00:34:25.29] SD: That's amazing, I just think that you deserve a medal or something.
[00:34:30.18] SY: It is so impressive. I think it was the very second episode that we had ever on the CodeNewbie podcast was with Brian Douglas, and it's called coding like a boss and he tells this story of how he was learning to code while doing his full-time, I think it was a sales job and squeezing in coding time at lunch before work at literally four o'clock in the morning, getting four hours of sleep, having a newborn baby - and I'm just like, uh uh, nope, I couldn't do any of that.
[00:35:00.20] SD: I think I did do that, to be honest, I mean I think I did the working schedule that he did when I was starting to burnout and trying to recover, but I didn't have a kid.
[00:35:11.07] SY: Right, the baby part just throws it all off.
[00:35:13.08] SD: That's a huge but.
[00:35:16.21] SY: Yep. Exactly, so shout-out to all the parents who are making it work and taking care of their families, too, that's really impressive. So next let's do some fill in the blanks, are you ready?
[00:35:27.18] SD: Yeah.
[00:35:28.10] SY: Number one - worst advice I've ever received is?
[00:35:31.27] SD: So I think that the worst advice that I've ever received is that you have to be one way or the other. Right, you're right brained or you're left brained, or you're a front-end or you're a back-end, or you're a Vue person or you're a React person. I think those dichotomies are really not helpful and I actually have read a lot about the brain - my mom is a neurologist, and the more different types of things that you do, the more you stretch your brain's capabilities, the stronger it gets. So it's actually totally the opposite of that. So if you're learning -
[00:36:11.26] SY: That is so cool!
[00:36:12.05] SD: Yeah, you're strengthening the - I'm going to say it wrong - the corpus callosum, the thing that's inside the middle of your brain, it's kind of a connective tissue -
[00:36:18.07] SY: Like a bridge.
[00:36:18.19] SD: Yeah, so it allows you to kind of fire synapses across a bunch of different, so you can - being very technical and being very creative, and you can actually solve technical problems by being more creative. Like a lot of how ethernet was made and formed, it was people saying wait a minute, maybe we don't have to do this, like first it was, ok, everybody waits in line for this connection, and then someone was like, what happens if everybody just talks at once and whoever is first goes.
[00:36:53.24] SY: Also don't do that.
[00:36:54.11] SD: That's a gross simplification, but that's a creative way of solving that problem. So I think that don't listen to people who try to tell you that you have to put yourself into some sort of bucket or some other bucket. I think humans are this beautiful spectrum of things, and we just don't exist in those categories.
[00:37:12.11] SY: That is so beautiful, but it also makes me wonder - why are we so intent on putting ourselves in buckets - and putting other people in buckets?
[00:37:23.00] SD: Well, it's good that you asked, actually. So I did a lot of study about this in graduate school, because I was really fascinated by categories and what they reveal about the mind and also the enlightenment, which is basically like when during Western culture we decided that we needed to categorize things to understand them, so that's when we came up with encyclopedias and dictionaries and things like that. Part of my interest in that was because I was a scientific illustrator, and that was what I did, was categorize these animals and plants and stuff. So there's a book called Women, Fire, and Dangerous Things: What Categories Reveal About the Mind by George Lakoff, that's one of my favorite books. And it dives into how different cultures perceive different categories, and how in some ways, you have to categorize to understand a bit. But the way that you categorize can reveal all sorts of things about the way that culture is shaped, about the way that your system is flawed, about the way that systems break down - so some of it is an embracing of these categories, and some of it is a critique of it, and I think that's really healthy - that any system that you love, you should also question.
[00:38:35.17] SY: Yeah. Number two - my first coding project was about?
[00:38:42.02] SD: So I mentioned that the first coding projects that I did for the field museum and stuff - I think the first thing that I made for myself was that site of mine that I was just building to kind of figure out how everything worked. And I just tried everything - it's not something that you could do on a production-level site. On production-level sites you need to make sure that there's consistency and clarity and like everything is put in really readable patterns. I think for that site, I just considered it my playground, and at the time it was just, I wasn't showing people that site or anything, it was just kind of like a garbage place for me to just have random experiments and stuff. So I think I learned a lot by doing that, by giving myself a place to make a mess and make it not make sense, made the other more structured projects a lot easier for me to see - ok, that part was definitely throw-away, don't do that. This part maybe I want to retain because that thing was actually pretty cool.
[00:39:49.16] SY: Yeah, very cool. Number three - one thing I wish I knew when I first started to code is?
[00:39:54.09] SD: One thing I wish that I knew when I first started to code is how to debug properly.
[00:40:01.00] SY: That's a good one.
[00:40:01.00] SD: I give a lot of workshops and the thing that I notice that holds people back the most is not learning the material, it's that people aren't very methodical when they debug, especially when they're just starting out. 'Cause it always seems like you're so close, so they just throw things at the problem, and maybe they'll throw three or four or ten things at the problem at once, and the problem with that is that you may think that you're going faster by doing that, but you're actually going slower. So one thing is isolation - isolation really helps because you're not figuring out if it's ten different things at once, it's this one thing, does that work, ok it does, great. It's another reason why I use CodePen for debugging front-end stuff, because I can work on some small piece in isolation and know that it's not a system that's causing the trouble. It's another reason why you - sometimes people tweet and me and say, I can't get this thing working. And the first thing I'll ask them for is an isolated test case, usually through the process of making an isolated test case they're like, oh, I figured it out. So it's really valuable to do that. It's also really valuable to not change too much at once because then if something else goes wrong, you don't know why, or if you fix one thing you don't know if it's five of things you did. Just taking a deep breath and believing in yourself - like, I've got this, it's ok that there's a bug, I'm going to fix it, one thing at a time. I honestly think that the best developers I know are methodical in that way.
[00:41:35.13] SY: Absolutely. And I think about that a lot because I've been coding for years at this point, and even I have trouble sticking to the process that I know works. And I think part of it is my ego, you know, if I could just quickly figure out and go really fast, I feel smart and like yeah, I nailed it, I'm amazing. But if I just kind of go through my regular, predetermined checklist and just go down that list and figure it out, it's like, eh, yeah, sure, whatever. I don't feel special for it - so don't optimize for your ego, is the lesson in that.
[00:42:13.04] SD: Yeah, I think in the course of coding you kind of vacillate between delusions of grandeur and hating yourself all the time anyway, that debugging process definitely keeps you from either side of that.
[00:42:34.16] SD: Oh my god, yes, thank you so much for having me on here, I'm a long-time listener, so I'm so honored that you had me on here, I really appreciate it.
[00:42:42.05] SY: And that's the end of the episode. Let me know what you think. Tweet me @CodeNewbies, or send me an email, firstname.lastname@example.org. If you're in D.C. or Philly check out our local CodeNewbie meetup groups, we've got community coding sessions and awesome events each month, so if you're looking for real-life human coding interaction, look us up on meetup.com. For more info on the podcast, check out www.codenewbie.org/podcast, and join us for our weekly Twitter chats. We've got our Wednesday chats at 9 PM EST and our weekly coding check-in every Sunday at 2 PM EST. Thanks for listening, see you next week. (Music).
Thank you to these sponsors for supporting the show!