💡 Founder Spotlight: Chris Coyier

Hey everybody, my name is Jon Kuperman and I am a developer advocate here at Cloudflare and this is another episode of our Founder Spotlight where we are talking to people, startup founders all over the world. Today we have Chris Coyier with us. Hey Chris, thanks so much for coming on. My pleasure. Thanks so much, Jon. I feel like I should give you a hang loose as one of the organizers of JSConf Hawaii. I really, really like that. So cool. Like I feel like this one's fun for me because I've been pretty much, I think, following CodePen since inception. Like I think I've been using it the whole time. I've used it as like my preferred tool for a lot of different stuff. But could you kind of give folks that are less familiar with it a little high level walkthrough of your company? Oh sure. CodePen yeah, it's kind of like where some of the old dogs now as far as like kind of online code. It's tempting to call it a playground or sandbox or something because that's what you do. People aren't, today there's not a lot of people using CodePen to like build a full website, but you are writing CSS, HTML, and JavaScript. So it's like in the browser. You just go to CodePen.io. You have to have an account, but they're free. And then you hit new pen. The pen is what we call these little like individual creations that people make. And you write some HTML. You might angle bracket, H1, hello world, close H1. And immediately that will render below on the screen. So it's kind of like you've wired up a little web server and you've wired up hot module reloading or something, but you didn't actually do any of that. You don't even need to know what those words mean. It's just, as you're typing code, you're seeing what it's doing. That's kind of like the central thesis of CodePen. A lot of people use it to learn. So we catch a lot of people in the early in their coding journey. They'll end up on CodePen because some curriculum that they're using uses CodePen because they read a blog post that has a link to CodePen in it or a CodePen embed in it because they're trying to show off some fundamental web platform concept. Like learn Canvas or learn how CSS works or learn how this accessibility concept works. A lot of developers use CodePen to communicate that idea because you click over on a CodePen, you're seeing the code and you're seeing the output of that code. So that's kind of the fundamental nature of it. And it's a business as well, because we layer on some pro features. So it's freemium in that most users just use the free version. And then if there's a couple of things that we might catch you on that you might really want or wish CodePen could do, some of those are kind of behind a paid plan. Yeah. Yeah. I think that's great. And is the collaboration feature behind the paid plan? I think that I've been a long time paid user because I've used CodePen as my favorite tool for tech interviews, especially during COVID times where it's like when we have these remote interviews or whatever. I really like being able to not just like watch over Zoom, but I love being able to get in there because I like interviews to be more pair programming than like one way. So I love just like getting a website in, we're writing JavaScript together, we're checking something out, adding CSS. Like I've been using the collab feature for a really long time. Yeah. Collab is literally what it's called. We call it collab mode. And the way it works right now is that you have any pen that you own, as long as it's owned by someone who's pro is what our paid plans are called on CodePen. You just share the URL with somebody and the editor boots up with the code and the preview, just as I described, but it's in real time. So I can see your cursor, you can see my cursor. It doesn't even, not even just two people, like it's really any number of people. And then you kind of work together. And like you said, interviews is a great use case for that. The other people don't even need CodePen accounts. So it's also not like a barrier, you know, you send somebody to link and it just works. They don't have, there's no friction or whatever between being able to work with somebody. And that's probably the number one use case for it. I do use it once in a while with coworkers and stuff to be like, Hey, let's, you know, let's hash this out or let's take notes together or something. People use it for different things, but interviewing happened to kind of be the sleeper use case for that. Yeah. I really enjoyed it. I like got my last job. I used it all the time. So switching gears a little bit, like one thing that always interests me is when a space gets a little bit crowded, like there's more than one offering in the space. It's interesting to me, like kind of organically different players sort of start getting their niche or whatever. And, and I don't want to misspeak here, but I always felt like one of CodePen's like niches is like this like beautiful creator community, like these CSS artists or these like innovators of new JavaScript or CSS APIs to do really cool things. I do feel like that's accurate that like you draw, especially people who are interested in making and sharing like very beautiful interactive experiences. Yeah. And we, I think we put that forward because for example, if you just land on CodePen, whether you're logged in or not, but it's a little better if you're logged in, actually that, that there's, we're trying to show you essentially the most beautiful, interesting things that are happening on CodePen now. And we've had that for a long time and we've been honing and tuning that for a long time. So if you just came to me like, Hey, what's this website all about? Click, click, click. And you're scrolling through stuff and checking stuff out. You're going to see a lot of like, wow, that's impressive. That's cool. And there's a social element to it too. And that we're going to show you how many views it had, how many comments it has, how many hearts it has like a social network, you know, like Twitter is, you know, everybody's obsessed with so many likes, they're getting on a tweet and stuff. Some of that makes its way at the CodePen. It's a social network, you know, for front-end developers in that way. And it's so cool that, you know, devs come here to do that. And that then we even send a weekly newsletter. That's like the best of the best stuff. Our Twitter account, our Instagram account is full of like, look at this amazing stuff that the users are doing. So because we do that, it's a bit of a cycle of, you know, if I'm going to do this really cool front-end thing, you know, why not do it on CodePen? You'll get a lot of, get a lot of love for doing that. At the same time, there's no way we're ever going to stop embracing that. Cause what a, what a cool thing. Like it's literally fun for me every day to see cool stuff. And it has been for 10 years, you know, but I do feel like that's not, it's a little, I don't think we found a way to unlock a business entirely based on like front-end art. Like that's not, I don't think we're, I'm more like our pro users to somebody like you who uses it to interview. You're almost a sleeper to me. Like, I didn't even know that you did that, but you have a pro account and thus give us some money to do that. The foundation of us as a business is probably more use than it is artists. You know, a lot of these, somebody that makes beautiful art on CodePen, they might not even have any particular need to have a pro account. So just cause I'm the founder, I need to, I need to know that. I need to make sure that we're serving the use cases and building a future in which that is useful for just front-end developers that have no, maybe don't even have any desire to be public with what they're doing. Yeah. Yeah. I think it makes a ton of sense. The tools are interesting because they can be used for so many different things, like linking from a blog post, teaching somebody who's a great one, interviewing, showing off really amazing techniques. I always like back to the free tier stuff, but whenever I want something like I want to spice up my blog with a cool button or a cool parallax scroll or something, I usually go to CodePen before even Google searching these days. Cause I just want to see, I want to go through and just see all these beautiful approaches to things. So I like that a lot. But then yeah, on the flip side, I found it makes a really good interviewing tool. I just, I love how fast the collaboration is and that we're right there. The elevator pitch for it is a little hard. Cause I'm like, well, people use it for these eight things. And I think if you catch the wrong, if I'm explaining that to a fellow founder or something who has no idea what CodePen is, I think that would be critical feedback. They'd be like, you need to focus on what this thing actually does. And you're like, no, but it's working. But is it? Because all founders kind of have that existential dread. I think over time, even if you're doing okay, could you be doing better? What if we did this instead? And there's all this like A-B testing you can do on a website, but you can't A-B test a choice. Yeah. Yeah. That's interesting. Could you take us back a little bit to the inception, from maybe just from a product standpoint, what made you decide to start your own company? And what was the kind of like, yeah, I don't know. What was that process like a little bit for you? Yeah. I mean, the classic story, which is dead true is that my blog, which is css-tricks .com, terribly cheesy name, but it's a little bit more than CSS Tricks these days. I just talk about the web platform. We have guests that write blog posts and an editor and some staff writers and stuff. And we just publish a couple of times a day stuff about the web. That's been also been around for even longer than CodePen, something like 13 years. And in those blog posts in the very early days, I was really writing, really like, here's how to make some tabs and CSS or whatever, just really like how to, I mean, we still do that, but I think I was, they were like really basic fundamental stuff. And almost every post had a demo. And I wanted to like send you to that demo pre the days that CodePen or similar tools like JSFiddle, JSBin, you know, they're very similar to CodePen even today. They didn't really exist yet in the very early, early days. So I basically like made a HTML file, FTP'd it up to some server and linked you to that. Here's the demo, go look at it. You know, why not? And I had some, you know, I put them at csstricks .com slash examples slash, and then some folder name and then just index.html, you know? And over time I was like, well, I want to put like Google analytics on all of them. So I know what kind of traffic they're getting. So like, I guess I'll make them index.php instead of index.html that way at the bottom, I can put a little, you know, include, PHP include statement, chuck the Google analytics script in there. And then I'm like, well, while I'm doing it, why don't I put a header on it too? And I'll say, you know, this is a demo by CSS tricks up there and all that. That way I had some control over like the look and feel of the demos over time and all that. And it started to be like, okay, but not very scalable. And there are like, you know, there's 7,000 just blog posts on CSS tricks, let alone all the videos, all the pages, all the forum posts, the forums are now closed, but there's just a lot of pages of stuff on CodePen and all of those demos, it's just not a good way to do it. Along comes JSFiddle and JSBin. And I'm like, these are just better. The fact that you can see the code and the result together, I was like, I should probably just move all the demos. Like it's early enough that it would be a bunch of work, but I'll just move them all. That way when I link to it, it's literally just better UX. Like the users will appreciate it because it's just better. This is a genius idea. Thanks for whoever the first person had the idea, but you know, it's like ideas like come along because almost like, cause like technology encourages them to come along. I'm sure Cloudflare is at the center of this. You know, I'm sure like people are building apps because of Cloudflare technology. Now at the time it was kind of like, oh, I can, you know, drop some crap in an iframe, pick this stuff up, put it in an iframe and it just clicked. And then a bunch of people did it, but I was worried because A, neither of them really have a business model. They still kind of don't really, they're still around, but I was like, that's a little worrisome when you're picking a business to power your business, you better be darn sure they're going to stick around too. And I just wasn't. And I knew I didn't have any control. So what if they just did something as a business that I just didn't like? It's just a lot to say, you know, this business that I'm trying to build every demo on it, every demo, I'm going to outsource to something I don't control. It didn't feel right. So I, I wanted to just build a simple one, like a version of that, that maybe you could self host or something, or maybe we'll open source it. I don't know. It was kind of like intended to be a weekend project, rope in some fellow developers I know, see if we can do it. And we did it only, it really wasn't quite a weekend thing. It took longer than that. And then we wanted to like the open sourcing, it turned out to be, it's not like it's hard to open source stuff, but there was like, we wanted to have off and we wanted to, you know, started to have ideas for payment code and stuff. And it was kind of like, I don't know how to open source that and have that feel good. I still kind of don't, there's like, you know, people don't open source their payment code usually, you know? So I just put up a canonical version of it at codepen.io, you know, and we're like, we'll just use this. And this will be for now, we'll just use that. And then I started, you know, immediately made the embed feature work, which is you go to CodePen, you build a thing, and then you get some code that you copy and paste over into a blog post. And it shows like a mini version of that pen over in the blog. That was the whole point. It was like, let's make this good for CSS tricks. So we built it. And then it just grew from there. It was like, let's make the homepage, all the cool stuff people are doing. Let's add likes, let's add comments. Let's add pro features. Let's add, you know, let's add, let's add, let's add for, you know, six, seven years. And then it was like, wow, we have a lot of technical debt and need to redo our stack. Let's slowly do that. And that's kind of where we're at now. And now there's even more of them, you know, like, as you know, there's, you know, competitors to us. There's people who have kind of leapfrogged us in certain ways and that they can do more in the browser than we can do. But yet people still choose CodePen a lot for some of the other features we have. So at the moment we're in this long journey that we're on, the moment is like, what's next? You know, how can we, knowing that we have this talented team of developers, what can we like make CodePen into that keeps CodePen's soul, but extends CodePen's features? That's awesome. I didn't know a lot of that. That's really cool. So could you tell me a little bit about the team? Like, are there folks that are still there with you that were around for that original weekend project or has it kind of shifted over the years? We have a lot of long timers. Alex and I are the two, Alex Vasquez and I are the two co-founders of CodePen. There was three originally. So, you know, it's just been a long journey on CodePen. So, so things happen, but nothing too traumatic or awful or anything, just a little shake up there at the top. And then some of the, I think the first employee I ever hired was Marie Mosley, who's still with us on community and support and all kinds of, she does like business intelligence, almost stuff for us now and is into database work. And then she, you know, a lot, you had a small company, which were nine. So people wear a lot of hats. Yeah, indeed. I kind of like that, you know, it means you have a lot of influence over where we go and what we do and how much power you have. Nobody's not shipping at CodePen, you know, everybody's like, has a lot of, there's none of that feeling like I worked on a thing for two years and it never even saw the light of day, which is like a real recipe for burnout, I think. But anyway, she's still here, you know, she's the first person we ever hired still there. I think the second person we ever hired is still there. There's been people that have come and gone, but a lot, a lot of long timers. Yeah. That's great. So one thing that always interests me, cause I find that I've talked to a lot of folks who weren't necessarily setting out to start a company. And it kind of sounds like CodePen was sort of like this way in some senses, or maybe you didn't know that it was going to be this thing when you started it. Like, how do you view, like sort of how do you view company culture? Or like, how do you, how do you handle that transition when it goes from like a weekend project to a side project, to a real company with real employees and real, you know, potential for, for things going right? Like, how do you think about kind of that, the culture side of things? Yeah, it did. It was, we had to be slow and careful, you know, definitely on day one, it wasn't like, let's do this. We have an idea. Cause I think this is, this is a totally possible route is like, I'm serious. I got an idea. I'm going to build a prototype for it. I'm going to make a slide deck. I'm going to send it to YC or whatever, or I'm going to shop it around. I'm going to get on a plane and go out to Silicon Valley and meet as many investors as I can get some money, use the money to buy some employees and some server space and stuff and build a startup. That's a perfectly acceptable tech story. If you ask me, ours, wasn't that only in that, like, we all had jobs already. We're all like adults already. And I think the, the idea was that like, we've seen this happen so many times, just because if you're in tech, you can't avoid like knowing what tech startup stories are like, like it's like unavoidable part of tech culture. But we were all working for this company called Wufoo forms online, you know, still exists and it got bought. And it was obviously very good for, it wasn't not for me cause I was too late of an employee, but for my co-founders, they did pretty well. And the founders of the company did really well. Cause it was, you know, it was a great little company. They, they sold and made their bucks and then went to survey monkey where they made even more bucks because they rode the train of that thing. Survey monkey, ultimately going public, which is super great for them. So, oh my God, you know, still friends with these guys, young guys basically done for life. You know, it's one of those stories that's like, you know, so obviously we have some desire to do that, but I'm already running CSS tricks. I'm already experiencing what it's like to like have a job and have side projects that make some money. I am very interested in making money off of the Internet. You know, like I'm not my desire isn't I like sure impact is cool and all that, but I have no desire to like run a big open source project for no money or something like not that altruistic in the world. I'm interested in making things that lots that you are obviously useful and good for people and making money while we do it. Like that's just my spirit in the world. And I think they wanted to see that too. I think they could see what I was doing. Like maybe the, we could all do it together. Huh? You know, why not? So there was idea that like, maybe we could do well enough that we could de-hitch from our current jobs at survey monkey at the time and see if we can do it. And we really did do it. And they, when we took leaps to do it, like when I quit, I was like, oh crap, you know, like we better dial up the juice on this stuff. Cause we were not making a ton of money at the time, but I had CSS tricks. So I had a way to pay the rent if I had to from incoming money and they had benefited from this, you know, being bought out of the company and their own little nest eggs, they could run on for a while. So everybody took a leap of faith, but it was padded, you know, I think that's a great perspective to hear. It wasn't like you're a spent your last like dinner's money on a server rental or something like that, but it also wasn't like you're sitting there, you know, able to retire and just doing it for fun. It was kind of a nice. And I realized that's a privileged situation that the reason all three of us were in that position was just, it was life choices. It was work. We took time to get there, but all of us have our own, you know, whatever. There's a lot of people that have to work a lot harder to be in a position we were in than I had to work. Totally. No, absolutely. Do you ever, I don't want to get you in trouble here, but do you ever think about going back, like just the ease of like, just getting a paycheck from some company somewhere versus running your own business? Oh, maybe. You want to buy us? Cloudflare. Cloudflare is killing it. Just saying. I'm happy to come. I'm just saying, but no, I think that's a, I have no, we're not in talks with anybody. It's not the thing where it's a very healthy company and we're doing fine. We're looking at the future. We're trying to make some big swings at some tech we're going to do, but that is in our culture is that like someday I'm not looking to run this till I'm 90 years old or something like that. Tech's not, that's not probably going to happen anyway. Like tech changes and shifts and stuff. I'd like to stay relevant for a long time, but I do think it makes sense for CodeGun to go somewhere eventually. And I will take that ride with it, I hope, and continue to do something at the new company, transition, whatever that is going to look like for our companies. That would be great. That would be a great kind of, I don't know, end to the song or whatever. Not that CodeGun's ever going to go away. I'm just saying end to my story or completion of it or something. That would be great. And at that point, yeah, I really will just be getting a paycheck from that company or whatever. I still think about everybody had dream jobs early in tech. I still like when people work at Apple, I'm like, ooh, fancy. You work at Apple? That's amazing. I want to work at Apple. But do I? I don't know. Yeah, no, totally. Yeah, it's a tough one. That's really interesting. So I guess the kind of last question I have on this is, do you feel like there are certain things that you did as a founder and things I'm thinking of as maybe being very slow and meticulous with your growth and things like that, that have set up this sort of... Do you know what I mean? The difference between the VC backed company on the race for a billion dollar valuation versus just trying to start a legitimate company. Do you think that that... Do you think, A, that's something that you have intentionality around where you're trying to be slow, sustainable, steady, things like that? And B, do you think that affects the culture as well? It does. There's a real serious tension there. We had meetings early on with people for advice and stuff about CodePen that would say, you know how you use the collab feature? They'd be like, why would you charge for that? That's so stupid. That should be a free feature. You're really making a misstep here. A lot of people... This is cool tech. A lot of people will use this. It was before... I think now it's a little more taken for granted and some places are even giving it away and stuff. It's less of a super unique feature. But in the early days, it was actually pretty unique that we were doing it. And they're like, you should give it away. Not only give that away, give every single one of your pro features away. Your usage of CodePen will really skyrocket. You know what I mean? If you have this great tool and it's free to use, my gosh. That is a way that you can roll a startup. But then you have rolled the dice so riskily that you have no income. There's no money coming in the door. And we did take funding. We took a million dollars at one point from the people at Serving Monkey, from our buddies, Chris and Ryan Campbell and Tim Savitt's older brother, Chris Savitt. They did our first million dollar round, which still have half of it. It wasn't that fundamental in the end because we spent it well. But at some point, if you have no money coming in and you hit the end of it, you're done. You're done. And most startups do that. But that would really suck for CodePen because there's something, I think we're dang near at a hundred or more million URLs on CodePen of things that people have made. You can't dead end that. So we have strategies for making sure that that absolutely 100% never, ever, ever, ever happens. And it won't. But it would if we were dumb. If we were dumb, if we didn't care, it would if we are just ran out of money and just had absolutely no plan. So that's not cool. And we never did take that route. So we took a safer and slower route on purpose because we wanted to have more time to do that. I love that. Absolutely. But did we make the right choice? That I don't know. There is another world in which we made way more pitch decks, took way more rounds of money from people, hired up, built faster, took bigger risks, gave everything away for free, tried to sell the thing or whatever. That's just what would have been a different world. What was cool about this route is that we're still healthy. We're still here. We're still doing cool stuff. We're still having fun. And I, at the moment, really don't answer to anybody. I love that. Yeah. I mean, you're totally right. There's like this other world where, I don't know, CodePen just takes over the whole world or it's like the only thing that you need in terms of this. But it definitely, I think you have to kind of make this binary decision between going like really big, like trying to get the acquisition or a giant IPO, or just trying to make something really sustainable where you can have a small group of people doing cool stuff and you know, growing, but growing like a, like a regular company, not like a, like be sure kind of darling. There's some personality stuff to it too. Like, I think I'm ready for bigger roles. I think I could run a bigger team, but I'm not sure if I can run, but I'm also like, not, I'm like risk, I'm not risk averse, but like, I'm like kind of conflict diverse. That's part of my personality and stuff. So am I actually cut out to run a really big ship knowing that there's some level of just like uncomfortability at all times, you know, you know, daily, really hard conversation. I already work too much too, let alone, you know, then you, and I have a family too. So am I going to say, Hey family, I need to be gone all the time because I'm yelling at people. I don't know if I want to be that person, you know? No, no, for sure. Where I know a lot of companies, especially ones we've been talking to have had kind of unique stories about the way COVID has like reshaped their company or reshaped their culture. Like, was it a fairly easy transition for you all? Or was it something that really hit hard when, when everything started? We're on the easier spectrum for sure. Cause there was, there was people pulling back, you know, I was to some degree like, Oh, maybe we should cancel the, you know, Hulu advanced and scale back down some of these costs. Cause we don't know there's some uncertainty in the world. I think people were tightening their belts a little bit. I felt that a lot on CSS tricks of advertisers trying to call down advertising campaigns and stuff just to, you know, just to be careful a little bit at Codeman. We stayed steadier up a little bit because I think there was at the same time that was happening. There was some people being like, Whoa, tech is actually like a little resilient to this. And as a person, I want to get into tech because you can work from home. The salaries are so good. It's this, it's this career. There really was a push early COVID for get yourself into a tech career. And because CodePen is a little tied to that world that there's a lot of people using it. And, you know, like I said, curriculums and learning and even self -learning is a big part of that. And, you know, things like free code camp that we saw a little rise, I think, you know, I think there are some people probably canceling accounts, tightening belts, and then more people opening accounts because they're on the next journey. Yeah. Yeah. Awesome. So I think we have like a little more than two minutes left. I was wondering if there's anything I missed that you wanted to talk about, like giving shout out to things or just kind of like stuff that you wanted to cover about your journey. I don't know. I don't can't think of anything like that, but I appreciate, I appreciate you having me on to talk about all this stuff. I appreciate it. There's yeah, there's a, there's a certain pleasure in just getting to talk about yourself for a while. You asked me this, I don't feel too guilty, but I'm equally interested in your journey and what it took to, and what Cloudflare is doing and stuff. We barely got to talk about Cloudflare at all, but rest assured people listening, we do use Cloudflare for quite a bit. There was a, there was a couple of years ago, we had a this is a classic. This is nobody will be surprised by this that we, you know, that we got hammered by DDoS stuff. You know, the dang world's getting DDoS and ransomed and all that terrible stuff. And we still are. It's just now that we have so much Cloudflare protection in front of the site, you don't even notice anymore. Look into the dashboard and see a little, see a little attack and be like, didn't even notice. Sorry, kids. I love that. I love those stories. People just sipping their coffee. Like, oh, we got it last night. Right. But we were talking before the show that was like, you know, that's how people thought of Cloudflare a couple of years ago, even though it's still true that it's all these passive technologies that you have that you just do nothing. You set them up and then you forget about it, which is a great foundation to have. But like the script has changed for y'all at Cloudflare a little bit. Now it's like, use our services more actively, you know, build your functions on CodePen, build your data storage on CodePen. And we're starting to make more and more use of that too, because they just feel next gen to me. And it's very cool. Yeah. I mean, me too, honestly. And I like seeing, I feel like we've put out a lot of these building blocks and then this last few months and hopefully big in the next year, we'll start finding really cool ways to pair them all together, you know, video platform, workers, KB, all that stuff. So yeah, that's awesome. All right, cool. Well, yeah, once again, thank you so much, Chris, for coming on. Did you want to link people or I guess verbally link people? So you mentioned csstricks.com, CodePen.io, is that right? That's right. That should do just fine. On the twitter.com? I use my name for everything. So Chris Coyier is C -O-Y-I-E-R is my last name. And that's my personal website and Twitter and GitHub and everything. I'm one of those boring, I don't even have an NFT as my avatar. I just have a regular photo. All right. Well, thank you so much. I really appreciate it.