Making Learning HTML, CSS, and JavaScript Easier with CodePen and Chris Coyier

Joe Casabona: Hey everybody. Welcome to another episode of How I Built It. Today, I want to tell you about two things. The first is a new project I recently launched called WP in One Month. With WP in One Month, I want to help you make the jump from using WordPress to creating with WordPress. I’m going to do that through in-depth affordable online courses that take somebody who knows how to use WordPress, and shows them how to do more.

The very first course I’m offering is a course about how to build a blog from scratch. No coding is required. But it will teach you how to set up a blog by buying a domain and configuring hosting, installing WordPress all the way up to making money with your website. It’s a really great course,m and it’s on sale now for 50% off at $19. So head over to wpinonemonth.com to check that out.

The other thing that I want to tell you about is our sponsor. This week’s sponsor is hover.com. With hundreds of domain extensions and no heavy-handed upselling, and best-in-class support, Hover makes it easy to spend less time on your domains and more time on your big idea. I am a hover user. I bought the domain wpinonemonth.com with Hover, and I’m a huge fan. And this week you can use the offer code, BUILDPENS, all one word, all caps, BUILDPENS for 10% off your first purchase.

And now, on with the show.

Hey, everybody. Thanks for joining me on How I built it, a show that asks, how did you build that? Today, My guest is Chris Coyier. Hey, Chris. Thanks for joining me.

Chris Coyier: Hey. Thanks for having me. I am happy to be a guest. How I built it. Love it!

Joe Casabona: Thank you very much! Yeah. It’s very exciting. I know you build a lot of things on the internet and one of the things I want to get into is how you manage that time. But first, I think we’re gonna focus specifically on CodePen, today. So why don’t you tell us a little bit about CodePen, and how you came up with the idea?

Chris Coyier: Oh, sure. So yeah, CodePen is…codepen.io is the URL for, and it’s kind of like, the heart and soul of it really is…Well, the heart and soul I should say is the community around it. But technologically speaking, the heart and soul is a code editor in the browser. So if you were going to write some HTML code or CSS or JavaScript, you can do that on CodePen. It brings up this kind of special environment where you see individual boxes for HTML, CSS, and JavaScript all at the same time. And then a half of the screen is kind of dedicated to showing you the output of that. So you could type like an H1 tag and type title and close the H1 tag, and it will render that  HTML for you to look at the kind of in real-time, like it detects that you’ve kind of stopped typing. And then it’s like, “Okay, I’m going to grab that code and make it into a web page, and show you the result of it.” So that’s, you know, that’s what it does. And you could write HTML, but you could write in markdown and, or you could write in Hamill if you’re a, you know, a Ruby nerd or whatever, and prefer that language, there’s all these pre-processors it supports. So it’s nice for playing around with that kind of thing.

And playing around is a big part of it. It’s about learning. It’s about sharing an idea really quickly. There’s a million ways that you could use CodePen. There’s no prescribed version of it. It’s kind of like, I don’t know. I have this idea to build this really cool button that when you click it, it spins and a gradient goes swooshing by and SVG sparkles come by. People totally use it for that. And I love it. There’s like a ton of creativity around copay. But there’s also like, the bug I need to solve. Here’s the HTML and CSS I’m using for it, and it’s totally screwed up. And I don’t understand it. Let me use that and then send someone a link to it so they can look at it and see that that’s a problem or whatever.

So, yeah. I mean, it’s a code editor in the browser that you can use for all kinds of different things. Stopping short of like using it for a big production project. I know you’re a WordPress guy. You can’t build a WordPress site. I can CodePen, you know? So that’s sometimes, that’s a little confusing for people. You can’t use CodePen for absolutely everything yet. But maybe, you know, for the most part, it’s just little demos.

Joe Casabona: Yeah, totally. And like, I mean, I’ve used it for all of those use cases. And like, I have a designer friend who was basically asking me recently how to add like “embed this image code on a page.” And so I just like mocked it up in CodePen and sent it to her. And she goes, ‘Oh, I get that. Like, I totally get that now. So much easier than trying to use words to explain code, which is kind of the alternative.

Chris Coyier: Yeah. sure. It’s so hard to peg down when you send me like you asked me like, “Oh, what is it? Who is it for?” I’m like, “I don’t know.” My elevator pitch sucks for it. It’s about so many things. It’s about, it can be your portfolio in a sense. It can be, you know, people just use it for all kinds of different things. And I love that. So I don’t really mind, you know, that’s a big use case is communicating back and forth on a team. Like there’s people that use CodePen that have nothing public at all, because all they’re doing is like mocking up things for a project and talking back and forth on a team with it, and then they move it to a production project. And that’s that. That’s just the way they use CodePen.

Joe Casabona: Yeah. Yeah. Awesome. I mean, that’s a…and how did you come up with the idea?

Chris Coyier: Well, it’s not the idea of having a single screen code editor in which you’re looking at the HTML, the CSS JavaScript, and the preview of it Isn’t a new concept. We did not invent that. In fact, you know, JSFiddle does that, JSBin does that. They’re both older than CodePen, and I love those things. I think they do a good job in there. They’re still around. They’re still doing a good job with that tool.

And in the very early days, like the idea concept was like, I’m writing…another thing I do is write on CSS tricks. It’s just one of the sites that I’ve been writing about web design for a long time. I was like the way I was doing demos before that was just making an HTML file and hosting it in like an example directory, right on my own web server, and be like, “Oh, I want to show you this blog post and talk about it. But I also want to show you the complete demo. Well, I just linked to myself, and showed the demo. And it’s like, that’s kind of cool. But in order to like, see the code, you really got to like view source or use the dev tools or whatever. And it wasn’t very compelling. I think I was using JSFiddle mostly at the time I would start putting demos on there because it was just way more compelling of a way to look at a demo. I was like, this is awesome. I should just move all my demos to JSFiddle and I could have done that. And it actually would have been, I mean, they’re still around today. It probably wouldn’t have been that bad of a move. It probably would’ve been pretty cool. But I was kind of like, I don’t have any control. What if they are just too close for someday? Or what if I’m like, I get a lot of traffic to these demos. What if I want to like put advertising on it or something, or have a little bit more control about being able to get to that demo. And then being able to get back to the article. And I just wanted like more control over the end to end experience, you know, and I thought it would be a fun project to do, anyway, It seemed like within my wheelhouse to build something like that, it wasn’t actually, you know, we started doing it and I commissioned some friends. Tim and Alex right away who are my co-founders at CodePen be like, “Dude, let’s just do this in a, like a weekend project. Like help me build this thing. You all have better JavaScript chops than I have. Timmy, a better server chops than I have. Let’s just build this thing and kind of see where it goes.” And it was cool and a fun little project to build. 

And then early on, we were like, “So how are we going to do this? So we’re just going to make it open source, and people host it themselves or, have like a canonical hosted version of it, but open source. And if you want to install it yourself, you can, or should we make?” And then where should we put the main version of it? Should we like put it on CSS-Tricks and have it just be a part of that? Or should we make our own domain? This is a way, way early days, you know?

“No, let’s just give it a name and we’ll just host it.” And then we’re like, pretty soon, we’re like, this is actually like super cool. I think we’re going to make a weird choice, in the beginning, is not making the editor, the homepage, like all the rest of them, are for the most part. Instead, the homepage is going to be like all the coolest things people have built on it today. Because one of the first things we built was like, just show me a list and admin screen of all the pens that anybody’s made. So I can click through all of them and just see what’s up. See what people are building. Then we’ll build a little tool, click a little star, and move those ones to the homepage. So then it’s become, then it became like You know, this awesome homepage of just random interesting things that people have built. And then it just took off from there. Like we should have people be able to log in so they can save them, and then they should be able to hard on them,and they should be able to comment on them, and they should be able to collaborate on them. And then we should have teams and the, you know like all the features just blew up from there. And it became pretty clear that like, I dunno, we’re going to have a pro plan that unlocks features. and then that super tied into the rest of the app. So it’s like becoming harder to open source this thing. And it’s actually not that interesting of a thing to open source.

And there’s a bunch of other open-source ones that probably are better for that purpose. Anyway, so it became this, like, we’re just going to host it. We’re just going to run this thing, like a more traditional startup, and go from there. So that was kind of the life story of it. But yeah, the idea came from just like, the fact that it’s just a cool, compelling way to show off code.

Joe Casabona: Nice. That’s awesome. And that it’s, you know, I know a lot of people have called it kind of like the Dribbble of code. Cause you can like…

Chris Coyier: Absolutely. We take a lot of cues from Dribbble, you know, it’s very, it’s very similar. You go and you see a grid of designer things, and you can follow people and talk about them and hear them. And that way it’s very similar to Dribbble. And in fact, you know, I know Dan and we’ve talked to Dan many times, and Rich, and the team over there. And it’s like “Hey, heads up.” We’re like kind of building a thing. And a lot of times when I’m reaching for a design pattern, I look at Dribbble because it’s, you know, I don’t know if people even think of Dribbble as like a super well-designed site, I guess they do. But it’s not like it’s mostly like what’s on Dribbble that people think about which I’m sure they don’t mind. But I look at Dribbble as a masterpiece of design itself. Because there’s just so many little things that I’m just like, “Oh, I’m struggling with where does she go? or how we should handle this? or what the hover should be like? and where the data should go? and stuff. And I’m always like, ”Yep. They nailed it. Going to copy that.”

Joe Casabona: Absolutely. And like…

Chris Coyier: So yeah. The similarities from Dribbble are there.

Joe Casabona: Totally. And like, I mean, [Inaudible 10:37.46] specifically is like the guy, he’s like the reason that I’m any good at CSS and stuff like, handcrafted CSS and…

Chris Coyier: Oh, I love that.

Joe Casabona: Yeah. Just like his books were the first books I read on. Like, totally. And like, those are still like dog-eared and on my bookshelf and like it’s just so good. So, awesome, awesome.

So it sounds like we kind of answered the second question a little bit, you know, like you kind of built this out of a need, which is, I feel like how every great tool is built. And then like, you kind of looked at JSFiddle and kind of design cues from Dribbble and stuff like that. But is there any, like hard research you did to be like, there’s definitely a need for this? And this is my project, like Silicon valley kind of stuff that you would like included in the business plan?

Chris Coyier: Yeah. No, and they’re probably should have been. And they probably should. To be honest, they probably should be consistently doing that. I mean, just because we’ve launched now and we exist now, doesn’t make research not interesting to do. Especially for future things that you’re going to build. But I’d say that we’re kind of bad at that. 

I would say that the reason we didn’t, there’s not necessarily a great excuse for it because I prove research is always valuable, at least kind of a minimum amount of it to kind of validate what you’re doing. But like, I had a pretty good idea of what I wanted and we just built it. And then it was useful. So like, I asked, I researched my own brain, decided that this would be useful, and yeah.

Joe Casabona: Oh, well I was going to say, yeah. And then like other people started using it. So I mean, to other people that seem like good research. 

Chris Coyier: Yeah. And they tell you. And I don’t know if that counts as research. I’m sure a research methodologist would tell you that doesn’t count. People just tell you stuff, but it kind of feels like people are pretty clear about what they would like to see CodePen do.

And then we can match it up. It still feels like early days to me in that we’re not done building all the stuff that I would like CodePen to do. So it’s like, I don’t, you know, I don’t have an upcoming survey that I’m going to send out to all existing users that ask, you know, that is trying to validate future features. Cause I’m like, I know what future features we want to build. It’s more stuff that I want. So I don’t know. And I’m not trying to talk anybody out of the research. In fact, if anything, please allow me to talk you into it. I do think that you should have some pretty strong idea that the thing that you’re going to build is useful to somebody. And if it’s just for yourself, that’s cool. But that doesn’t make it. It’s not going to guarantee that it’s going to be a big business. And in fact, we probably could have built a more successful financial business if we did that. And we’re, I think we’re not to downplay that we’re doing poorly financially and stuff. We’re doing fine. But I’ve felt that if we just did, if we structured it more, like what can we build to make money, we probably would’ve made more of it. 

Joe Casabona: Gotcha. Yeah, totally. So on that same token, you know, did you talk to anybody about, you know, like features, or business advice, the direction that you should take the business, and things like that? 

Chris Coyier: Yeah. Sometimes. And now we have investors. So we are a more traditional startup in that we took some money in which to hire people and to build faster and stuff. And that was fun and interesting. I think that’s when we needed the most advice. Cause yeah, like if I’m asking like, “Hey, where should we take this thing?” That’s the kind of advice that I like. Just me personally, I’m not very good at taking, cause I hear the ideas and I’m like, “Nope, don’t like it.” I’m going to do what I want to do instead. That’s just because I’m the worst, you know, I should probably be listening. But if it’s like, how should we structure our business? How should we handle taxes? What kind of business should we be? What kind of stock should we offer our employees? I have no idea. So I’m going to suck down that advice with a straw. I’m probably just going to do whatever you tell me to do, as long as I trust the person telling it to me. So that type of advice is like, “Yes, please”.

And I think people are different in that way. I think there’s probably some business-type founders out there that know all that stuff super well. There, they have an MBA. They’ve researched startups, the business portion of it, they got under control. They know just how that’s going to go down. But they need help making sure that they build something that people love and that PR is useful to people and stuff. So they’re out there soliciting feedback on that and not so much the business stuff. It just depends on what your skillset is.

Joe Casabona: Yeah, totally. And like, I am woefully behind on the CodePen radio, actually. So I didn’t realize that you guys took investors. But I mean, I guess that’s a quick aside.

Chris Coyier: It’s about a year ago now. So it’s just, it’s not even that big of a deal. That’s a very kind of traditional setup. We took $1 million, which is,  you know, is both an amazing treasure chest of like it’s the most money I’ve ever seen in a long and in the grand scheme of things, not all that much money. You know, when you’re hiring expensive designers and developers, that just doesn’t go that far. You know, there’s just expensive Developers, have a big salary, they have good benefits and as they should, and yeah. So that will buy you a couple of designers and developers for a couple of years. So there’s such a risk there. You better have a good plan, which we did. 

Joe Casabona: Nice. That’s great. And you know, if people listening along, if you want to learn more about that, you know, Chris and his co-founders, do you do a Podcast, strictly dedicated, just like how CodePen was built and like I remember the investor show specifically, you guys hadn’t taken it. You guys hadn’t taken money at the time. But I remember going through the process and you talking about the process.

Chris Coyier: Oh yeah. Right now, we do have a podcast called CodePen radio, where we talk about the process, and certainly, there were some episodes about the, specifically about the taking of money, and how it all went down, and pre and post stuff that gets into some of the nitty-gritty. Even some like ones that are probably not all that fun to listen to, unless you’re going through it yourself. And now there were some boring lawyer ones about what paperwork mattered and that kind of thing. But I suspect they aren’t all that fun to listen to but are more of like a resource for people that are close to going through that or have questions about it. So pick which ones you listen to wisely. 

Joe Casabona: Yes. Yeah. And like, yeah. And if you’re like, what you hear, you’re hearing here, this is like, I feel like this could be the abridged version of what the full podcast is. Because I know you guys spent a lot of the first few episodes on the question I’m about to ask, which is how did you go about building CodePen?

Chris Coyier: Oh yeah, like the tech stack and…

Joe Casabona: Yeah, totally.

Chris Coyier: Yeah, we do. We have touched on it here and there. But it changes over time. And there’s a lot, there’s a lot to say. Cause it’s, you know if you’re asking me like, how do you know, what do CSS tricks run? I’ll be like, “Dude, it’s just, it’s PHP. My SQL runs on a single server.” I don’t know. The most interesting thing is like, I don’t know, it has a CDN and we put engine X in front of it and it’s actually on PHP7, which is cool. But like the tech stack is like not particularly interesting. And it’s very easy to talk about. 

The CodePen tech stack is not easy to talk about cause it’s like, not that anything of it is secret. None. None of it is. It’s just some of it’s above my head and it’s just, it’s like everything. It’s one of those, I think, as apps get bigger, and complexity and they do a lot of stuff. It’s like, yeah. It’s almost like naming a language that isn’t in the stack somewhere. Because it’s just, it’s big and weird. So the primary thing, like when you go to the URL, the homepage is Ruby on Rails. So you could say it’s a rails app to some degree, but that breaks down pretty quickly. Cause it’s like there’s a ton of JavaScript stuff involved. 

The new thing that we’re building and releasing soon is all in React and Redux and immutable JS. But it’s kind of within the rails stack still, but there’s still going to be a little rails routing and stuff, I think. And then it’s like, well, what does CodePen do? Well, you can write in SaaS there, for example. So you write some SaaS and you hit save. Well, that’s got to go out to a server. That’s in a Docker container. That’s on AWS that has a node server running on it that accepts that request and processes it through Gulp. And then returns that through some other technology. And it’s like, man, there’s just a lot of tech happening there. So like what’s the stack? I don’t know. It’s like everything.

Joe Casabona: Yeah, man. That’s wild. And like, and then there’s a whole lot that like, you need to be aware of. Like, I mean, you’re letting people execute JavaScript on the front end, right? So there’s gotta be some security things, right?

Chris Coyier:  There is. JavaScript is dangerous when it’s especially mostly because of XSS. There’s plenty of other JavaScript vulnerabilities too. But that’s kind of the big one because if you allow someone to execute Javascript that they’ve written on your site, that means they can basically steal a session cookie and log in as you. And that’s really bad. Or log in to steal other people’s session cookies. And if you’re authenticated as somebody, you can be like, “You know what? I think I’m going to close down this account or something.” And that’s like really super, extra dangerous. So we block that. That’s Hard. And we’ve certainly had access problems though. They mostly come up, not in the app themselves. So if you like to execute arbitrary JavaScript, it’s not the JavaScript that you write in a pen to execute. Cause that’s actually not that hard to lock down because we execute that in an I-Frame that’s at a different subdomain. Actually, we’re going to put it in a different domain entirely, fairly soon. And then it’s like, you can’t steal any cookies cause there aren’t any cookies there to steal. So like just that alone goes a long way. And it’s in a sandbox I-frame and we use this thing called the content security policy. 

And we do some stripping of things that are particularly nasty. It’s like, it’s not like we do perfect security because nobody does perfect security. But like we have a pretty locked down as far as CodePen or playground things go. But yeah, security has been a big deal. It’s more like, because it’s a rails app you can, or not even because it’s any kind of application. You could like, for example, create a collection and you get to name it, anything you want. So you better make sure that when you name a collection and the way that you save it in the database and displayed on the page, doesn’t allow someone to name a collection script alert high, and have that execute. Or every web has problems with that.

Rails is a pretty good job of helping you with that as does WordPress and stuff. Most things are like, you can’t just name a blog post title and access attack, and have it execute because WordPress has thought about that. And, you know, largely doesn’t allow you to do it at least with certain permissions and stuff. So it’s not a problem. But there’s just, the title of something is one of like 80 different places where little bits of data are stored. So you better make sure all 80 of them are really secure.

Joe Casabona: Yeah. Yeah. Right. And like, I mean, when you’re building with WordPress, like that’s the thing that I know the best it’s you can escape all of the input, and all of the output, and all the different ways, like you can escape specifically for JavaScript or HTML. Or just like URLs in general. And when you’re building something from scratch, that’s like stuff that you need to really think about. So, man, that’s, I would really encourage everybody to listen to CodePen Radio, actually. Cause they, you know, you guys do a bunch of deep dives Into like your server stack at least like early on, like when you recorded those episodes. And so, which I guess transitions really nicely into the next question, which we’ve touched on a little bit. But what’s the biggest transformation, I guess, that you’ve gone through since you first launched? Like, what would you say is like the thing that took CodePen…

Chris Coyier:  I bet everybody would have a different answer to it than if you asked me just cause it’s like, I don’t know. I bet Alex, for example, who’ve,  it’s just one of our developers who wrote a lot of like the collab mode stuff would be like, “Oh, that was a big deal for me when I, you know, version one of collab mode on CodePen, which is this thing that’s like Google-docs, right? You have two cursors and you can both write together and it supports up to six people in there and stuff. And it’s just a very tricky and weird thing to pull off in a web app and it’s a pro feature on CodePen.” He wrote it himself. He did a bunch of research on operational transforms and it was like doing math and networking stuff and figuring out how we can write this feature himself. And then use like, just that’s complicated enough. But then how you handle that kind of real-time communication stuff like with WebSockets and all that is interesting too. So we’re like, he’s like doing all this complicated stuff on top of using fairly new web technology. And then he’s like “I’m going, I can’t handle it, it’s too buggy. It’s too weird. I can’t figure it out. I’m going to switch to another library.” And then another library, and then another service. And then, so the number of times that he had to rewrite how collab mode, where he’d probably say that was like one of the hardest transformations we’ve ever had to do. 

And Tim might say, “Well, when we switched to teams” and supporting his team structure. Maybe that was the hardest thing I’ve ever had to do because it was one of these things that fundamentally rewrote what a user is on CodePen. And it touched every URL, and it touched everywhere that a user was relevant on CodePen. And then had to account for whether you’re in a team context or a regular context or something. And, you know, it took us eight months to write the feature. And like, that was the biggest transformation to make. And I dunno what I would say. I may be like, well, we launched a major, major redesign at one point. So that touched about every piece of CSS and HTML on the entire site. So that was kind of a big deal.

But there’s other things, you know, there’s business-wise and like how we operate as a company. Taking the money and hiring employees was a major transformative change. In the early days, we weren’t even on rails. We had to throw away CodePen and rewrite it in Rails. So that was a big transformation. It’s like, it’s almost like if there’s never just one thing, I think there’s always going to change. 

Joe Casabona: It’s like taking your favorite channel…

Chris Coyier: or least favorite..We’re switching to or not. This new feature is really changing our JavaScript development, a ton. We’re writing a big feature in React and Redux, as I said, and it’s like, wow, is this different? This is a completely different universe. And it’s a major transformative change at CodePen. So we’ll see how that goes.

And that’s all tech stack changes. You know, it’s not including like how we think about the community behind CodePen. Or like, what has our mission changed a little bit. And that’s, it has a little bit, and in some cases in the early days, it was just like, “Oh, we just want to build a little, little, you know, little web editor in the browser kind of thing” You know, use code mirrors and just make a little thing. And then it’s kind of changed into like, “Well, this is clearly a community. It’s a community in all the ways that an online community is. People are talking to each other there and commenting, and they’re meeting each other. And then there’s real-life meetups. And there’s people that have their own little slack teams of just hanging out because they met on CodePen, and they want a chat that way, instead of like any. It is just a community. So the transformation was from just this little code editor into like, no, this is more of a  Community now.  And so we need to support that. 

And then in the future, what is going to change as well? Like, I think it might be more than just, it might,  education might become a bigger part of it, and it might be like, what is CodePen. CodePen is a low barrier to entryway to get into coding. That might be more of our thing going forward. We don’t want to change our mission statement every week or anything. But you have no choice, but to evolve it over time. So I think just as big as tech stack changes, it’s like, why are you building what you’re doing, changes over time as well.

Joe Casabona: Yeah. And that, I mean, that’s so important. That’s a great point. And I think a lot of people don’t think about the why. They just kind of, I want to do it cause it’s cool. But I mean, the why is what should drive your business. And, I can speak to the…

Chris Coyier: Well, just what your employees need to care why as well. You know, he needs to, if the people that work for you hopefully have some kind of hopefully kind of agreement with you that what you’re building is worth it, and interesting, and helpful. And they have some motivation that comes within.

Joe Casabona: Yeah, absolutely. And I just wanted to touch on the education thing a bit because that’s another big space that I’m in. And like a CodePen pro account for me has been instrumental in like teaching in the classroom because when I started learning code in like 2002, maybe like HTML and CSS, like I would have to go and right-click, and view source and copy and paste it into notepad, and then save it and open it up in a browser. And like, that’s a cumbersome process. Anyway, but like with all the stuff that we have to kind of know now, like, as I’m sure that you’ve had, I think on CSS tricks, you gotta pull, like, what’s our front end developer or it’s like, how do you spell it? Right. But like the bigger question is what is a front-end developer? 

Chris Coyier: Yeah.

Joe Casabona: Just, it’s like a huge conversation now. And, the fact that I could do something for a group of students who have never seen HTML and CSS before, and do something, and show them how it changes in real-time has just been a great teaching instrument for me. And, for them too, like they’ve built, I’ve had them build essentially static websites inside CodePen, you know, and then we figure out how to upload it to the server later. But as far as learning HTML and CSS, like, I mean that, yeah, just, they could see something…

Chris Coyier: [Crosstalk 29:20.87] in feelings when I hear that. Some of it is, yeah, so I’m so excited. That’s so great. That’s why we built this. I want to see people using it to teach and learn. And if this can be like a low barrier to entry thing where you’re just like, “Oh, I get it.” You know, if we can have those clicking moments and help people learn that that’s so great. And so that’s all the good stuff.

And then the bad stuff is like, “But, oh! There’s so much more I want to do for you.” Like as an educator, you can’t set up a classroom and like group those students together. They can’t really, there’s no part of CodePen that allows them to submit an assignment to you and give feedback to them. And then you’re like, oh, they want to make a static website. Well, Web Design 101 says you should probably make an index dot HTML page and then make an about dot HTML page and then link those two things together with anchor links that might be in every like HTML intro to HTML book exists out there. And you can’t really do that on CodePen right now because you just get the three panels and it’s not really like what local web development in a way. It’s like a unique and weird thing. And we’re hopefully going to address all those things and make CodePen even better for that. But it’s like, it’s, you know, so it warms my heart that people like you get to, you know, use CodePen for education in that way, and it’s like, “Oh, we have so much more we want to do for you.”

Joe Casabona: Awesome. Well, if that sounds, if you ever need a beta tester, I’d be happy to test.

Chris Coyier: Yeah. I’ll put you on the list.

Joe Casabona: Yes. Awesome. Okay. So I think we’ve talked a lot about your future plans and we’re bumping up against the, I kind of have like this arbitrary half-hour limit and it’s not arbitrary. I like to keep it focused and I can talk to you for hours. So I will just end with the final question, which is, do you have any trade secrets for us?

Chris Coyier:  Trade trade secrets. The secret to success. Yes, I do have one. It’s the only one. Now that I’ve been alive in both of us, I’m sure it fell along for years and years and years. And you start to get a little bit more perspective on the industry, the longer you are around, you know. And I just, one of the things that just becomes more and more clear is that things come and go. And that’s okay. And that’s fine. And it’s worth embracing. But one of the ways that you can be successful, if you’re not one of the ones that goes, you know, and I’m just talking about persistence, you know, I was just like at a wedding literally last night. And there was a woman there who was like trying to, she’s quitting her job and she was into maybe getting into blogging and she had set up a WordPress site actually. And she had this idea of something she wants to write a lot about, wants to sell and advertise. And I’m like, I know this is so boring, but it’s the one piece of advice I have for you. If you want to be successful in doing this thing and blogging, it is relevant to me because I’ve had success there, but it applies to anything in the world. You just have to do it forever. I’m talking, years. You know, like don’t even expect any success for years, you know? Like that’s like the old adage with restaurants, right. You lose money for the first two years or whatever. Yeah, that’s right. I think that’s how people should think of all of the things that they tackle. 

And if you’ve started something, be it a startup or a new blog or a book you’re trying to write, or your furniture business or whatever it is, if the thought of doing it for years, it’s just like, yeah, no big deal. I’m going to do this, anyway. This is just what I do. I’ve already been doing it for years or so. If that’s like the feeling you have, you’re in, you know. if the feeling you have is ”Ugh! Really? years?” Really, I’m like, it may not be the thing. And you may just learn, you might just learn a little bit about yourself. You may just learn that “Hey, this isn’t my thing, really.” Like I tried it, and I don’t regret trying it, but it may not be the thing.” 

And so, you know, CodePen and the other projects that I have through learning, through time, I’ve learned that, yes, these are my things. I want to keep doing these things forever, and I’m going to be doing these things forever. I found it and I’m lucky to have found it. And you know, I hope that other people can find their things too. I realize not everybody has, and it’s not sad. You’re just, you’re still on the journey there. And so I think the success, which is a, you know, a mediocre amount of success on my own projects is a hundred percent attributed to persistence. That is my trade secret. 

Joe Casabona: That’s awesome. That’s awesome advice. I will echo that a hundred percent to the point where like I put together a business plan one time and somebody was like, what’s your exit strategy? You know, if this works, I want to keep it. I don’t have one. Like I go until it’s done being a business, I guess. But, that’s just fantastic advice. Like you need to have passion and you need to rise to the challenge. And,  I mean, in web development, you know, I think for me, the fear of my skills stagnating or falling behind, or not wanting to learn the next new thing, like React or Angular or whatever comes after that. Like Oculus Rift or whatever like that, I’m scared that one day I’ll be like, I don’t feel like learning that, but I’m not there yet. And so it’s still awesome. So.

Chris Coyier:  Yeah. Oh, man. I struggled with it too. All this new stuff for a while. I was like, “Oh, I get it. I’m in.” And even at my own company now, they’re at like, they’re moving so fast and, I’m so, you know, have changed roles into more of a ship steer and cheerleader and stuff. It’s not true. I still write a lot of code, but it’s moving so fast that I can see that day coming more and more. I’m like, what new library are we using? How does it work? Do a good job. I’ll be over here, grandpa. But it’s not necessarily true. And I know that it’s not because they don’t know.  I’ve plenty to offer, even if I’m not writing. 

And so to you. And so does everybody else, you know, I feel like if your skill is that you can write a well-crafted email, you’re still useful.

Joe Casabona: Yeah, without a doubt. Maybe, maybe more than like a lot of people, because writing a well-crafted email is really hard. Especially like a confrontational one, like you need to explain things and, but that’s a whole other conversation.

Well, yeah. Chris, thank you so much for joining me, for talking all about CodePen.

If you want to learn more about Chris Coyier, you can go to codepen.io or CSS. Is it CSS dash tricks? I just realized this is a css-tricks.com.

Chris Coyier: Yeah, it is. Yep. And that’s another trade secret. If your URL is taken, just put a dash in it. It doesn’t matter.

Joe Casabona: Nice. Nice. Yeah, it’ll still work. And lastly, I’m really excited. I haven’t read it yet, but I’m really excited to read it as Chris has a new book out called Practical SVG and it talks all about SVG.

Chris Coyier: Thank you very much for mentioning that. Yeah. It’s on a book apart and it’s yeah, it’s all about SVG, and please buy it.

Joe Casabona: Yeah. It’s like, there’s no doubt in my mind that it’s going to be awesome. Because I’ve learned a lot of SVG stuff from the things you’ve written. And a book apart is one of the best book publishers out there for web development. So it’s just a lot of greatness rolled into one book with a purple cover. Which one is it, like number 14 for them?

Chris Coyier: It’s 19, actually. And it’s kind of a light, nice blue color, which is the color, if you use Adobe illustrator when you’ve selected a vector object and you get the little blue outline around it, and the little blue dots that show you where the vector points are, the color blue is the color of the title of the book. A little secret for you. 

Joe Casabona: That is so awesome. I know this is kind of a long wrap-up. But Chris, thank you so much for joining me. What a great conversation. I hope you, the listeners, enjoyed it as much as I did.

And thanks again to our sponsor, hover.com. Make sure to use the code, BUILDPENS for 10% off.

If you like the show, please rate it on iTunes. It helps so much with, you know, where we kind of show up in the rankings, and things like that.

And finally, until next week. Get out there, and build something.