Hey everyone and welcome to Developer Tea. My name is Jonathan Cutrell 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. 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 Tealater on in today's episode. But first I want to jump straight in 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, 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 building animated stuff with JavaScript instead of Flash when Flash wasn't really something people were looking for anymore. And yeah, and that's, I basically progressed from there and I've always, I've always basically had a strong interest in web animation and my work was largely in web animation sort of stuff before 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 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 to know how to design them, design animated interfaces or build them out. And some people can do both, which is sort of being 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 left all the hard API work up to the other fantastic talented people who do those things. And I am 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 browser. And web animation API sort of still falls in that it's still being worked on category. So wouldn't go putting it in or putting it alone without some sort of fallback inner 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 tabacans 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, it fills up your inbox pretty quickly. Yeah. I think the most contribution I've done in that area is just log bugs. Yeah. With, with, with Chrome saying, okay, right now, that's that it, which it may mean to be fair, you know, if you're out there listening and you're wondering how to get involved actually walking 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, 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 in flash originally. Oh, so I was 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 teenage aunt, that sort of work appealed to me. Software engineer who was a little bit too on the back end 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 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 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, you know, I thought you are the 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 an action script, but I was animating and signing 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 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 I was on, I was like hooked and that I wanted to do that sort of thing. That's great. So you ended up at CodePen, eventually. Yes. What led you to CodePen? So I actually ended up getting my job at CodePen 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 Koeh 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 Tim 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 SanFran. And I had the thought of my head, the only people I would leave this job for is CodePen. If they would have, if they would have suddenly like, you know, be able to hire staff. And then after that they actually got some funding and have a looking, that we're looking for people and Chris actually skyped me one day and said, hey, like, do you want to work for us? And I was dyed like, I couldn't believe it. This is like literally my dream job that I didn't even think it was possible happened. And it happened, obviously I've got the skills to do it, which is important. But I think they thought of me because I had been such an active user and made the effort to meet them in person 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 am one of these people. It's worthwhile to think about, you know, what are the places that if they were to contact me, I would be ready to go, you know, like, yeah, there's, there is a short and sometimes non-existent list of those places. Another important list to have probably is 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 whatever happens, where do I go? Right? Like what is my backup plan? These are like the professional insurance pieces 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? Not necessarily realistic. Bad things happen to good people and bad things happen to good companies and it's important to have those thoughts 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? Yeah, I personally think it's important to have that dream job goal in your mind because I speaking speaking from personal experience, the last two jobs I've had were literally my like dream jobs before I got them, you know, 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. Not to get like to try and like trying to say we're dealing with a secret here or something like I just think things and they happen, but I think it's important to just, you know, 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 it may come up on you before you realize, you know, 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 focusing on a specific thought, that's a powerful step that people can make. And 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 take some time to consider 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, right? Yeah, yeah, maybe. I think you do not in a mystical way. I don't mean, you know, 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, 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 Code Pen a few more times, or, you know, yeah, totally. That 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 Code Pen and what it's what it's like to work for Co-Pen. But first, I want to take a quick sponsor break. Today's episode of Developer Tea is sponsored by Hired. On Hired Software Engineers and Designers can get five or more interview requests in a given week from over 3,000 companies from startups to large public companies. And each of these offers has salary and equity up front. Now, they have full-time and contract opportunities, and you can view these interview requests and accept or reject them before you ever talk to any company. So there's never an awkward conversation that has to happen. 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 Tea. 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 Tea. I assume you work remotely. So correct. Yeah, I work remotely. And does Co-Pen even have offices? No, very 100% distributed. Sure. That's what I thought. I wasn't 100% sure. But what does what does a typical workday look like for you at Co-Pen? 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 I'm actually I like to start work early in the morning. So being in the West Side actually really works to 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. 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. Yes, meetings and oh this client needs this right now like drop everything you are 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 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 it 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 just have told you about it that most of 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 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 a good at least a good understanding of the full stack and my job can be anything from writing you know CSS to JavaScript to Rouse. My last couple of rolls have been someone who's 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 Rouse and JavaScript and then I sort of can like fill in any parts that people can't get to that day kind of sure it's good so how many people are actually at CodePen though. So there is the three founders and then we have they have four employees including myself. Okay wow and such a such a widely used product now. Yeah it's kind of they only just started hiring I think their first time 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 it was wasn't that long ago and it's 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 you're probably under a rock if you 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 resetter features quite honestly. CodePen edits 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 hamil 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 beside 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 Rachel I'm sure you'll talk about that a little bit as well Rachel but and even goes 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 pin themselves but it's your pin 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 Tea 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 um 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 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 okay what is the next feature that you could put into this thing right yeah but then when you guys releases like oh yeah well that makes sense right like it seems like that that totally especially for a particular audience usually yeah so for like a there's professor mode for example um where you can do what I basically what I was saying that it's like a cast of your code yeah 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 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 you know every day people are like oh I wish we could do this and you know there's a whole we have a trello board which is or several trello boards which is just 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 key it's funny um since I started working for CodeFan I've had these like friends like just say to me like just start putting in feature requests to me personally like add like add a social engagement and I'm like you know I'm gonna forget this instantly the most inappropriate form of feedback to get your idea like like into the app like just send an email to support that's really funny we extremely receptive to you know request any request 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 mm-hmm 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 uses mm-hmm and also is we get requests that that can be like you know dangerous to implement you know not secure or you know 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 you know oh yeah we can do this in the next week pile or yet 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 and it's only then you know the the dangerous you know the one the ideas that are probably bad that we will actually go no we'll never do so yeah yeah I'm actually really glad that I left out this one feature because if you're listening to the podcast I want you to pause if especially if you don't know what code pin is pause and think what are what is a feature that would be 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 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 use cases mm-hmm I'm a shocking collections user I've never been very part of code pin but some people make these incredibly useful you know categorized collections examples of you know front end work like best of you know a whole of game 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 code pin has its own like collections like a patent's 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 user's doing an amazing job of making really useful collections one of my favorite features definitely yet another really cool one is uh templates so uh you can you can bring templates it the the paid plants and I don't know if you guys have a a tier where it either way the paid plants 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 trying 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 code pen 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 um 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 code pen yeah and we will manage the s3 permission so you can do whatever you want with those things on code pen you don't have to worry about that sort of stuff which is super handy so the way I use code pen typically is I'll mock my pins are awful they 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 and they're strict where I work typically the designers don't do much code and so they'll ask me hey you know I know so we have this kind of packed between the designers and the Developer 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 because you know a very simple seemingly simple things may end up being pretty complex on the front end so when they come to me though and they show me a design no send a screenshot whatever I look at it and I listen to their description and the very first thing I do is I open code pen 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 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 I can calculate that particular padding that way or whatever and that has been so such a helpful thing because imagine doing it on your local machine you'd have to create your own version of pin like this thing already you basically you would have to do the same exact thing that code pin does except you have to keep the files on your local computer right like and then to share it uh that's a whole the whole different discussion you'd have to go I mean you could again you could go and use another service or whatever and just for fairness I guess things like JS fiddle uh similar in terms of like the fundamental core idea of writing front and code and then you can view it on the front end and there's actually some really good use cases for JS fiddle too but if you're you know if you're trying to share this and you're also a developer that you you exist online in some capacity like people know who you are on social media or whatever code pin is kind of the the social platform for Developer That compliments GitHub which another feature another great feature you can export to adjust to adjust yeah super super valuable stuff well the thing that really stood out for code pin is for me as a user is we have that community uh in that social aspect and discoverability if you're just making little mocks up just for yourself and you have no intention of of sharing them with anyone then you might not see you know the value and community but you know if you want to just like put some of your work or your ideas online and just put them out there and see what other devs you know have to say about them code pin is great because like 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 um it's a super supportive community it's it just blows my mind 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 making it 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 code pin 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 um 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 want to make sure that you don't miss out on the second part of the interview go and subscribe and whatever podcasting app you use to the show uh iTune supports this and pretty much every podcasting app especially if you're on a mobile phone they support uh this function of subscribing so make sure you subscribe and uh that episode will be delivered directly to you and every other episode in the future of Developer Teawill 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 three thousand employers that you can basically pick and choose from uh you can get up to five or more offers in a given week go and check it out hire.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 Teago and check it out spec.fm thank you so much for listening to today's episode and until next time enjoy your tea.