In today's episode, I talk with Rachel Smith, a JavaScript developer currently working at CodePen! Today's episode is sponsored by Hired.com! If you are looking for a job as a developer or a designer and don't know where to start, head over to http://www.hired.com/developertea now! If you get a job through this special link, you'll receive a $2,000 bonus - that's twice the normal bonus provided by Hired. Thanks again to Hired for sponsoring the show!
In today's episode, I talk with Rachel Smith, a JavaScript developer currently working at CodePen!
Today's episode is sponsored by Hired.com! If you are looking for a job as a developer or a designer and don't know where to start, head over to Hired now! If you get a job through this special link, you'll receive a $2,000 bonus - that's twice the normal bonus provided by Hired. Thanks again to Hired for sponsoring the show!
Please take a moment and subscribe and review the show! Click here to review Developer Tea in iTunes.
Hey everyone and welcome to Developer Tea. My name is Jonathan Cottrell and in today's episode, I interview Rachel Smith. Rachel is a JavaScript developer. She works at CodePen and that's actually the primary topic of conversation because I'm a big fan of CodePen and I was really excited to talk to Rachel about working with the people at CodePen. Again, Rachel works entirely remotely as does the rest of the team, so we talk a little bit about remote work and what it's like to prioritize features on a platform that you actually happen to use. Today's episode is sponsored by Hired. If you are a designer or a developer and you're looking for that next dream job, go and check out Hired.com. We will talk a little bit more about what Hired has to offer the listeners of Developer Tea later on in today's episode. But first, I want to jump straight in. Let's go ahead and talk with Rachel Smith. Rachel, welcome to the show. Hi, Jonathan. Thanks for having me. No problem. I'm excited to talk to you about CodePen. I use this every single day about the things that you are doing at CodePen, but also the things you're doing on CodePen. So I think that's kind of how we're going to frame this discussion today. Awesome. Well, first tell us about your background and then we're going to find out kind of how you ended up at CodePen. So my background is in code. I'm a developer. So my background is in, I'm actually originally started as a Flash developer. My first web job was building Flash banners for an advertising agency. And that's how I got into advertising, which is what I worked in up until working for CodePen. I always worked for ad agencies. And then I just sort of moved on to JavaScript. And I've been working for CodePen for a while now. I've been working for CodePen for a while now. I've been working for CodePen for a while now. I've been working for CodePen for a while now. I've been working for CodePen for a while now. At the time when they were building animated stuff with JavaScript instead of Flash when Flash wasn't really something people were looking for anymore. And I basically progress from there and I've always, always basically had a strong interest in web animation and my work was largely in web animation sort of stuff before working for working for CodePen. And when you say web animation, for those who are not familiar with that, can you kind of describe what all goes into web animation? So web animation is, it's kind of, I guess you could call it a front-end specialty. So that, it basically encompasses anything to do with animating with front-end technologies. So that could be using CSS or JavaScript or SVG. And it used to be a lot of Flash, not so much anymore. But it's basically just being able to animate interfaces. And that's usually having the know-how of how to design them, design animated interfaces or build them out. And some people can do both, which is sort of been sort of my, what I like to do is motion design work combined with coding it. And that's what I would describe as web animation in my case anyway. Yeah. So have you been involved with the web animation API that has been the standard API? No, I would, I'm definitely a web animations enthusiast, like consumer. And I leave, I leave the, all the, all the hard API work up to the other fantastic talented people who do those things. And I'm more the kind of person who waits till it is a standard and then I'll take it and use it. Okay. That makes sense. When you work in web animation, rather than just, you know, doing it as a hobby, you kind of have to use things that are at least a little bit standardized or mainstream across. At the same time, MacMation's API sort of still falls in that it's still being worked on category. So I wouldn't go putting it in or putting it alone without some sort of fallback in a production site at this stage. I would consider myself definitely on the consumer side of pretty much all of those tools. I don't think I've ever actually worked on any kind of standard or standardization process with anyone yet. I used to get some of the W3C emails and that just, it was so many emails. I think I got, I had more emails from tab atkins that were not directed at me directly in my inbox than any other email type at all. So it was, it was a, it filled up, fills up your inbox pretty quickly. Yeah. I think the most contribution I've done in that area is just log bugs. Yeah. With Brow, with Chrome saying. Okay. Broken now. That's about it. Which may mean to be fair, you know, if you're out there listening and you're wondering how to get involved, actually logging bugs is a really important thing because especially if the bug hasn't come up before, that is really a huge part of the job of developing these standards. So definitely important. So I want to go back even further though. I want to know kind of what got you interested in developing Flash originally. Oh, so I, I have like, basically I have a long education history where I first thought I was going to be a software engineer because I enjoyed, I've always enjoyed coding since I was a teenager. That sort of work appealed to me. Software engineering was a little bit too on the backend side of things. For me, I didn't feel it. I didn't feel like it was that appealing. So then I sort of went, I didn't feel like it was that appealing. So then I sort of went, I didn't feel like I was going to be a software engineer. I just wanted to be a software engineer. So I went, I went like 180 and decided I was going to be a web designer. And I actually went and studied to do a web design course, which just happened to have like a Flash elective in it. And then I realized, and this is, this was in 2010. So front end development was as a job or as a career was only just a job. And I was like, oh, I'm going to be a software engineer. I'm going to be a software engineer. And I was like, oh, I'm going to be a software engineer. And I was like, oh, I'm going to sort of coming to the forefront at this stage. And I didn't realize before that point that you could be someone who codes, but also designs visually. And that's like a real job. I thought it, you know, I thought you were either coding and never looking at design or the other way around. And through Flash, I sort of found this way that I could, I was scripting, I was writing action script, but I was animating and designing. And it's like the original full stack, developer, right? Yeah. The animation aspect, which is something I never thought I would be interested in. I just sort of accidentally found it and I just fell in love with it. And a part of the reason I love animation is because it is so math based a lot of the time. So it's very logical, but the product of your logic, it can be just extremely beautiful and, you know, almost like art. So that's, that's why, that's sort of why I fell in love, with Flash. And then I found examples online of people doing things with JavaScript that sort of mimicked what Flash could do. And from then on, I was like hooked and that, that I wanted to do that sort of thing. That's great. So you ended up at CodePen eventually. What, what, what led you to CodePen? So I actually ended up getting my job at CodePen from, from being a CodePen, user, I would say. Oh, very cool. So I was a very enthusiastic CodePen user and I would talk about it a lot on Twitter and I, you know, started blogging on CodePen and I just loved it. And I actually ended up meeting Chris Coyier at a conference that I was speaking at, the same conference he was speaking at as well. And from there, I sort of got to know, him in person. And then I went on to meet the other two founders, Alex and Tijm, and sort of formed an in-person like connection with them all the while still being at my last job, Active Theory. And I was very happy at Active Theory. And the only, it's funny, I was really happy with my job at Active Theory and I would get job offers all the time from startups around, you know, LA and San Fran. And I had the thought in my head, you know, friend and I had the thought in my head the only people I would leave this job for is Code Ben if they were to if they were to suddenly like you know be able to hire staff and then after that they actually got some funding and that were looking for people and Chris actually skyped me uh one day and said hey like do you want to work for us and I just died like I couldn't believe it this is like literally my dream job that I didn't even think was possible happened and it happened obviously I've got the skills to do it which is important but I think the they thought of me because I had been such a you know an active user and made the effort to meet them in person and and just be really supportive of their product so I think that got me the job offer in the end. That's actually a really interesting thought experiment though for people who are currently happy at your jobs I I'm one of these people uh it's worthwhile to think about you know what are the what are the places that if they were to contact me I would be ready to go you know like that's there's there's a short and sometimes non-existent list of those places another important list to have probably is uh if suddenly this business that I'm at you know god forbid goes under and I can no longer work here if I get laid off or you know I can't work here. Whatever happens where do I go right like what what is my backup plan these are like the professional uh insurance pieces um because you know as much as we want to believe that the job that we have today is you know exactly the way it is today it's going to be that way or better tomorrow that's not realistic right uh not necessarily realistic and bad things happen to good people and bad things happen to good companies and um it's important to have those thoughts and I think that's a really important thing to think about. And start thinking okay you know what is my 10-year trajectory look like if this happens right or what is my dream job am I at my dream job or is there somewhere else that I want to be? Yep I personally think it's important to have um that dream job goal um in your mind because I speaking speaking from personal experience the last two jobs I've had were literally my like my dream job and I think that's a really important thing to have. I think that's a really important thing to have. Like dream jobs before I got them you know uh and I think if you have if you have that in your mind if you've made that list or you know that target you probably find you might subconsciously do things in your life that push you closer to that goal and then it becomes eventualized um not to get like too trying like trying to say we're dealing with a secret here or something like that. I just think things and they happen but but I think it's important to just you know shoot shoot for the ultimate job or just just have that in your mind and be aware that someday you could make it happen it is possible. Yeah and and it may come up on you before you realize you know um I've recently kind of been more and more interested in this idea of no effort to the minimum effort and how much of a difference it makes. To even just think about your goals right like sure it's important to take action but even the thought even the intentional thought about a goal and call it meditation or whatever you want to call it but uh focusing on a specific thought that's that's a powerful step that people can make uh instead of just you know kind of going through your day and going through the motions you know think about things and that's really broad obviously but uh take some time to consider what you're going to need to achieve. what your goals are. Take some time to consider, you know, in your wildest dreams, what would happen tomorrow? Plan around that. And just that mental energy of looking towards your goals can really change. You know, they say that your body ends up going wherever your eyes are. That's such a powerful metaphor for, you know, when you're thinking about something, when you're focused on something, you end up heading that direction, even if you don't intentionally do so. It's a powerful thing. So it's very possible that some of those thoughts that you had actually led to that occurring for you in some way that I can't really scientifically figure out. Yeah. Yeah. Maybe. I think you just... Not in a mystical way. I don't mean, you know... No, as in like in a tangible way, but it's so incremental that you can't really quantify it. But I probably would have modified my behavior to suit that, you know... Yeah. ...thought that someday I could be working for these people. So, you know... Yeah, totally. And so you made your pens a little bit better each time, or maybe like you tweeted at CodePen a few more times or, you know... Yeah. Yeah, totally. That makes... Yeah, that sort of thing. Makes a big difference. So that's really interesting. I'm going to shift gears entirely. We're going to talk a little bit about the work that you do at CodePen and what it's like to work for CodePen. But first, I want to take a quick sponsor. See you soon. The employers come from 13 major tech hubs in North America and Europe. And the best part for you is that it's totally free. Now, if you get a job through Hired, they typically provide a $1,000 kind of thank you bonus for using their system for finding that job. But if you use the special link, which you can find in the show notes at spec.fm, that bonus doubles to $2,000 when you accept that job. So go and check it out, Hired.com slash Developer T. Of course, that link can be found in the show notes at spec.fm. Thank you again to Hired for sponsoring today's episode of Developer T. I assume you work remotely. Is that correct? Yeah, I work remotely. And does CodePen even have offices? No, we're 100% distributed. Sure. That's what I thought. I wasn't 100% sure. But what is what is a typical workday look like for you at CodePen? Well, I work from home and I'm actually I'm on the West Coast. And the majority of the team is on the East Coast, but it's a slim majority. There's like East, Central, West. So I'm usually sort of get started maybe one or two hours later than some of the others. But I'm actually I like to start work early in the morning. So being in the West Side actually really works for me because it means I'm sort of online roughly at the same time the other people are. And basically my like my day is it's actually kind of fabulous. Like, my my comparing it to where I've worked previously, which is with agency where any I'm sure any agency developers can commiserate with me on this. But it feels like your day is like as a developer is constantly interrupted with meetings. Oh, this client needs this right now. Like drop everything you were doing that, you know, and that's just constant. And there's never a day where you just sit down and you're like, this is what I'm going to do today. And then you get that done and nothing happened. Nothing else happens. That's particularly true in agency style work. Yes. Yes, definitely. And and advertising agencies, especially sort of ad hoc, like every single day is sort of just whatever happens that day. So then and then I started this job, which is the opposite. I get up. I have sort of. You know, a plan of what to do, things I want to do today. And usually that's working towards some sort of new feature. But then there's also like bugs that need to get fixed. You might occasionally have a very nasty sort of bug that you need to, you know, turn your attention towards immediately because you told you about it. But most the day is sort of just writing code, which is is just awesome. Usually. We'll work on either work on little small things ourselves, but often larger features will be like one or two or three people working on it at the same time. And so that'll you'll often sort of like I hate using touch base, but I'm going to use it. You'll often touch base with, you know, the people you're working with via video chat, you know, maybe once or twice throughout the day just to like check in. And yeah, I my job is sort of I would say I'm mostly front end. But I also do back end stuff as well. So mostly rails, correct? Yeah, we do. We work with rails. So I'd never used rails before this job. And so I'm still learning rails, but it's going pretty well. And I also understand a bit of the upside of things as well. Like as far as we run a lot of stuff on Amazon Web Services and I I've used a lot of that before. So I kind of have good at least a good understanding of the the. The. The. The. The. The full stack. And my job can be anything from writing, you know, CSS to JavaScript to rails. My last couple of roles have been someone who sort of fills in the gaps. So you have like other people who, you know, you have people like Chris who are fabulous at CSS and writing copy and doing this very sort of front end focused stuff. And then people like Alex, who is not really into writing CSS, but, you know, he's he's great at rails and JavaScript. And then I sort of can like fill in any parts that people can't get to that day. Sure. It's good. So how many people are actually at CodePen now? So there is the three founders and then we have they have four employees, including myself. OK. Wow. And such a such a widely used product now. Yeah, it's kind of they only just started hiring. I think their first hire would have been around, which would have been Marie around maybe August of last year. And then they've hired the rest of us in since then. Maybe it's July, but I think this wasn't that long ago. And to think that it was just the three, those three guys like doing that. I'm just like, how did you do this? It's amazing. Yeah, it's a huge. I mean, the. The product is I if I don't use it every day, it's pretty close to every day. If you are a front end web developer, then you're probably under a rock if you don't don't know what CodePen is. You may not use it because there are other things that you could use, but most people now do use CodePen because in my opinion, it has probably the most flexible set of features, quite honestly. CodePen. CodePen at its at its core, the most important features that it has. You write HTML, you write CSS and you write JavaScript or some pre compiled variant of the above. And you can bring in libraries and you can bring in let's say you write SAS, you can write SAS directly in your browser. You can write Hamel or slim or Jade directly in your browser and CodePen will immediately compile all those things and create a there's a view below. Or. A side depending on how you have it set up and that shows you what you've created. So it's essentially like front end development in the browser and you can do all sorts of things with what are these are called pins. When you actually write this code, you save it as a pin and you can save drafts and people can fork those drafts. There's a whole social component. And on top of all this, CodePen now supports blogging, which is super important, especially to people like like Rachel. I'm sure you'll talk about that a little bit as well, Rachel, but and even go as far as doing like a live coding session where you can basically create a cast of your of your coding and people can watch you while you code. And it's not a video. It's actually them watching like if they were to open a pen themselves, but it's your pen and you're controlling the code and they can't go in and edit it until after you're done. It's it's a super powerful platform. CodePen is in no way sponsoring developer T, by the way. So let me just go ahead and say that. But super powerful platform. I'm probably leaving out a bunch of features because you guys are shipping new features all the time on this platform. Yeah, it's you know, I was the last developer to join the larger team and we've been rolling with the full team this year. And it's kind of we're just constantly making improvements and releasing new little features almost on a daily basis now. So it's really exciting. Which it's amazing. Like as a developer, you think about something like CodePen. It's hard to think of, OK, what is the next feature that you could put into this thing? Right. Yeah. But then when you guys release it, it's like, oh, yeah, well, that makes sense. Right. Like it seems like that that totally especially for a particular audience, usually. So for like there's professor mode, for example, where you can do what I basically what I was saying, that it's like a cast of your code. Yep. I could do that with a whole classroom full of students. And instead of looking up at a projector, they can look at their own computers and see things much more clearly. Yep. Yep. And people use it for education purposes a lot. Oh, I'm sure. Yeah. That's just one sort of vertical that we hope to, you know, take the product down. And just that's sort of where you get your your feature ideas from is like, how are people already using it? And what are they asking us for? Mm hmm. You know, every day people like, oh, I wish we could do this. And, you know, there's a whole we have a Trello board, which is several travel Trello boards, which is filled with like feature ideas. I was actually getting ready to ask you about feature ideas and where they come from and how you guys decide on them. And, you know, is there like a voting system that you have internally? And perhaps most importantly, how do I get my ideas into that queue? It's funny. Since I started working for CodePen, I've had these like friends like just say to me, like, just start putting in feature requests to me personally, like at a social engagement. And I'm like, you know, I'm going to forget this. Right. It's the most inappropriate form of feedback to get your idea like into the app, like just send an email to support. Yeah, that's really funny. We're extremely receptive to, you know. Request any requests anyone has and then and every request gets, you know, noted and recorded. And then basically we go through it sort of comes down to a criteria of like how much effort is required to make this happen. How will it affect things that are already in the app? Is this a change that's going to help just like one person or is it going to help a whole subset of users? And also is. we get requests that uh that can be like you know dangerous to implement you know not not secure or oh sure it's not a good idea you know it's sort of you weigh up those trade-offs and then like basically they'll end up in a oh yeah we can do this in the next week pile or yep we'll add it to our you know a couple of months long-term list yeah and then there's you know these stretch ones that are like one day we would love to do this but we won't you know make any grand plans towards it yet um and it's only the you know the the dangerous you know the one the ideas that are properly bad that we'll actually go no we'll never do so yeah yeah i i'm actually really glad that i left out this one feature because uh if you're listening to the podcast i want you to pause if especially if you don't know what codepin is pause and think what are what is a feature uh that would be really helpful to you and i think that's a really good question and i think that's a really useful that seems like it would be relatively easy to implement just pause the podcast think of that feature and then press play again um the collections feature it's such a i wouldn't call it simple because it's certainly not simple uh but but the idea of just saying okay let's take a bunch of these pins and wrap them up together and present them in their own view and let them have a title that could be massively useful for so many different uh use cases i'm a shocking collections user i've never been very good at that part of codepin but some people make these incredibly useful you know categorized collections of examples of you know front-end work um like best of you know hall of fame kind of stuff hey you want you know login forms like somebody has made you know a collection of the nicest looking functional login forms you've ever seen guaranteed um we actually have codepin has its own like collections like a patterns library where we sort of group these sorts of ui patterns into collections um so that's a really great resource as well but i mean the users do an amazing job of making really useful collections one of my favorite features definitely another really cool one is uh templates so uh you can you can bring templates the the paid plans and i don't know if you guys have a a tier where either way the paid plans definitely allow you to upload assets that you can like refer to anytime in any pin and it just knows where it is and that kind of thing that is super handy especially in the these days of if you you know try to import http assets like yeah or you have cross origin problems especially with things like canvas and webgl dealing with cross origin assets can be a nightmare sometimes and if you just are pulling all of your assets from codepin cdn you're not going to have any problems with that sort of thing so that's super handy or even things like svg images you can instead of inlining them directly you can you know go and go and put them on a cdn or whatever or i'm sorry not a cdn but basically this acts like a cdn right it just passes through to s3 for you but you don't have to take the time to go and manage that it's just in codepin and we will manage the s3 permission so you can do whatever you want with those things on codepin you don't have to worry about that sort of stuff which is super handy so the way i use codepin typically is i'll mock it my pins are awful they they look they look horrible but they help me so much because i'll use it to basically validate an idea right so like a designer will walk up to me and they're strict where i work typically the designers don't do much code um and so they'll ask me hey you know i i know so we have this kind of pact between the designers and the developers that if you think something might be complex on the front end come and talk to us and we'll you know talk through the idea and then you can you know figure out whether or not you want to try to still implement it or not um because you know very simple seemingly simple things may end up being pretty complex on the front end um so when they come to me though and they show me a design they'll send a screenshot whatever i look at it and i listen to their description and the very first thing i do is i open codepin and i try it on like a super rough almost i don't know what the word would be i guess pin makes sense there because i'm really kind of just sketching out uh the fundamental concepts right just to see how does the browser react when i do this this and this okay it's a little buggy or you know it doesn't seem like it can calculate that particular thing so i'll just do it and then i'll just add something to it because i've been holding it for a whole lot longer because i've because imagine doing it on your local machine you'd have to create your own version of pin like this thing already basically you would have to do the same exact thing that codepin does except you have to keep the files on your local computer right like and then to share it uh that's whole whole different discussion you'd have to go i mean you could again you could and use another service or whatever. And just for fairness, I guess, things like JSFiddle, similar in terms of like the fundamental core idea of writing front-end code, and then you can view it on the front end. And there's actually some really good use cases for JSFiddle too. But if you're trying to share this and you're also a developer that you exist online in some capacity, like people know who you are on social media or whatever, or CodePen is kind of the social platform for developers that complements GitHub, which another feature, another great feature, you can export to a gist. To a gist, yeah. Super, super valuable stuff. Well, the thing that really stood out for CodePen for me as a user is we have that community and that social aspect and discoverability. If you're just making little mocks up just for yourself and you have no intention of sharing them, then you might not see the value in community. But if you want to just put some of your work or your ideas online and just put them out there and see what other devs have to say about them, CodePen's great because you could end up getting picked and then you're on the front page and suddenly you've got all these eyes on it. And it's a super supportive community. It just blows my mind how, how amazing these people are considering, you know, what you can end up with, like with online communities, especially communities traditionally filled with developers can be, they can get a little bit nasty sometimes, but just this community is, and I'm not just saying this because I work there, because like this was my favorite part about CodePen before I even worked there, is just, it's just filled with lovely, supportive, encouraging people. Everyone's just, you know, out to be creative and have a good time and get ideas from other people and spin off those ideas and create new things. It's not about who makes the better stuff or, you know, like who's got the most, who's the most popular. It's, it's just people just getting enjoyment out of other people's code and ideas. And that's my favorite part. That's the end of the first part of my interview with Rachel Smith. If you, if you want to make sure that you don't miss out on the second part of the interview, go and subscribe in whatever podcasting app you use to the show. iTunes supports this and pretty much every podcasting app, especially if you're on a mobile phone, they support this function of subscribing. So make sure you subscribe and that episode will be delivered directly to you. And every other episode in the future of Developer Tea will be directly delivered to your device. We'll pick back up with Rachel where we left off in the next episode. We'll talk more about what she's excited about for the future of her learning and her career. Thank you so much to today's sponsor, Hired.com. This is especially for designers and developers, a job site that is specifically geared towards you. Over 3000 employers that you can basically pick and choose from. You can get up to five or more offers in a given week. Go and check it out, Hired.com slash Developer Tea. And of course that link will be in the show notes at spec.fm. As will, every other episode of Developer Tea. Go and check it out, spec.fm. Thank you so much for listening to today's episode. And until next time, enjoy your tea.! Thank you. Thank you. Thank you.