CodePen, and Getting Started on the Web, with Chris Coyier

By M. David Green , Tim Evko
We teamed up with SiteGround
To bring you up to 65% off web hosting, plus free access to the entire SitePoint Premium library (worth $99). Get SiteGround + SitePoint Premium Now

Chris Coyier on the Versioning Podcast

In this episode of the Versioning Show, Tim and David are joined by Chris Coyier, well-known creator of CSS-Tricks and co-founder of code-sharing site CodePen and the ShopTalk podcast. They discuss getting started on the web, the future of web technologies, approaches to coding projects, and least favorite things on the web.

Show Notes

Chris Coyier joins the Versioning Show

Transcript

Tim:

Hey, what’s up, everybody, this is Tim Evko …

David:

… and this is M. David Green …

Tim:

… and you’re listening to episode number four of the Versioning Podcast. This is a place where we sit down every two weeks to discuss the industry of the web from development to design — with some of the people making it happen today and planning where it’s headed in the next version.

David:

In this episode, we’re speaking with Chris Coyier.

Chris:

What’s up everybody! Thank you for having me on — I am very excited.

David:

Cool. So I know that a lot of people out there are already familiar with you, but how do you introduce yourself to folks?

Chris:

I have three major projects that I work on, and I don’t know what my title is at them, really. I just do work, and that happens, but I write and screencast and kind of participate in the community at a site called CSS-Tricks — that’s css-tricks.com. I have a podcast of my own, called ShopTalk Show, with my friend Dave Rupert, and I work on a web app called CodePen that’s at codepen.io. And those three projects take up all of my time in the world.

David [1:11]:

Wow, and a lot of us are familiar with those projects.

But one of the things that we like to hear on the Versioning Show before we get started — I like to ask people our philosophical question, which is —

Chris:

Nice!

David:

In your current career, what version are you, and why?

Chris:

[laughs] That’s an awesome question. What version am I?

One of the things that I do on my personal website, because I’m terrible at kind of remembering my own history and stuff — you know, like, Where were you in June of ’97? I’d be like, I was a younger man, I think. I can’t remember exactly where I worked that year. It’s hard for me to dredge up that information in my mind, so on my personal website — which is poorly maintained, but it’s chriscoyier.net — I like track it all, and I think I could probably go through that and look at years in which major things started happening to me in my career, and maybe I’d use that for my versioning system.

So I’d say maybe my first web job was in 2007. We’ll call that beta Chris, you know, and then maybe 1.0 came out in like 2010, when I started doing startup stuff, you know — let’s call it like V4.

Tim [2.30]:

So, one of the things we wanted to talk about today, since, Chris, you are all over the place on the web, and — especially with CSS-Tricks — going on to explain and define a lot of the new trends that are going on, I wanted to talk about where you see web development going.

That means, is it getting easier? Is getting harder? How have you noticed some of the trends in the industry change as you’ve been writing and speaking about the web? So, stuff like that.

Chris:

Yeah. Where is it going? is such a such a huge question. It’s probably — I don’t know — staying right where it is for the most part.

You see big discussions happen sometimes — Is the web doomed, is the web great, is the web whatever? It’s easy to get caught up in that, and it’s easy to think the web is doomed or something when you get caught up in a conversation like that, and you don’t really see it.

There’s not a whole lot of evidence that there’s less websites being made, or less companies are reaching for websites. Just because one Silicon Valley company decides to not make a website, or tacobell.com’s home page says Go download this app, that the web is doomed.

That stuff ends up being short-lived. And so I think the web is as big and healthy as it ever has and continues to go there. Because of some of the foundational principles of the web, like the URL is just so super duper useful, and there’s like nothing that’s kind of challenging the URL right now, that I feel just that alone will probably keep the web happy for a long time.

David [4:04]:

So it seems like the web itself is likely to hang around, but what about technologically? I mean, the way that you develop for the web has changed so dramatically — even since you started relatively recently.

Chris:

Yeah, sure, and that’s easy to get caught up in, too. In fact, it’s almost a joke these days that there’s a new JavaScript framework every 20 days or whatever. I don’t know, there’s some kind of joke around it.

I was at a university today, and I was talking with some students there, and one of the students expressed that exact opinion — that they felt like they learned a lot of JavaScript, and then took off for like three months to go do something else at the university or something — or had another job and kind of, like, left web development a little bit, as students do. They pop in and out of things, and came back, and they’re like, I felt useless. I feel like I didn’t know anything about JavaScript. I’m like, that’s so sad, because it’s like you totally do.

It sucks that they felt defeated for some reason, even though they shouldn’t, probably. The JavaScript fundamentally hasn’t changed that much in three months. Maybe there’s some other library that’s out or something. But your current knowledge is fine. In fact, please keep using it, you know. I think that’s sad when people feel defeated just because some new thing comes along.

That said, I think I take your meaning in that, over the years — if we call that a ten-year chunk, which is like half-ish of the web being around — it feels a lot different, and sometimes it’s easy to feel sorry for somebody who’s starting now.

Because they’re like, wow, you know, the tooling is so weird, and where do you even start? And where does your skill set fit into this very complicated skill set of doing things for the web? Which isn’t just like, I’m going to design something and then see if I can hack it together with a couple technologies and, ta-da, website. It’s like no no no, it’s databases, and security, and semantics, and content strategy, and designing for a crisis, and all these big topics that a lot of people are talking about, including on CSS-Tricks. You might go and read something about that and then be like, I’m new. How does this fit in with me? Where do I even start? What is becoming a web designer like these days? So somebody’s brand new to it, that’s just starting today in web design — what is it like for them? I bet it does feel more overwhelming than it did when I’ve started.

Tim [6:42]:

Here’s a fun question. Let’s say that you needed to build a new website tomorrow, and it could be of any sort of simplicity or functionality. What are the types of technologies, new APIs, frameworks you would be interested in using?

Chris:

Yeah, the boring answer is It depends! But it’s my favorite answer. I’d reach for HTML for sure. That one seems like it’s been sticking around!

David [7:09]:

I’ve heard about that one. That’s supposed to be really good.

Chris:

Uh-huh, that one has really been around — it’s hung on for a long time. And there’s certainly room for specializing in HTML, I think — like really good HTML. It’s rarer than you’d think for something that’s so fundamental. I see people struggle with what to put where and what you can do with what. But anyway, that’s always involved with everything, so it would probably be always involved with anything I build.

And then what? I don’t know. It’s so hard to say. You can do so much with just HTML and CSS. And I got a long way in my career by just sprinkling a little jQuery on top of that. I felt like I was uber-powerful. Sprinkle a little WordPress on top of that and you’re king of the world.

I can do anything. I have data at my command. I have a little interactivity at my command. I can style anything. I love CSS. I kind of made my my career off really digging into CSS and understanding it and troubleshooting it. Still to this day I absolutely love taking a design that somebody else has done, and analyzing it, cutting it up and figuring out how to build it in HTML and CSS. I absolutely love that.

That’s what I would do. So if the project at hand was make a site for my sister’s new Kombucha brewing company, I’d be like, Hell yeah, I really wanna do that. I’d be like, So what’s the deal? Is it a five page site? Maybe I’ll just rock it with HTML, CSS and JavaScript.

Oh, she wants to have just a simple blog on top of that. Maybe I’ll throw it on Jekyll, just because that seems pretty easy and it encourages writing in Markdown, which I enjoy. We don’t need that much.

And she’s like, Well, we’ll throw comments on there. And I’ll probably stay on Jekyll, maybe throw a little Disqus on top of that, kind of thing.

Well, now she’s at different brewery events and every month, every week she’s got to hop in the website and start editing her calendar, or when she’s gonna be where and stuff.

And you know what? I think this is database territory now, so I probably won’t hand roll something with the database, because I just don’t do that and that’s not my forte. Just being me, I’d reach right for WordPress, because I feel like that handles that. I’d find some plugin that handles scheduling and stuff, and rock that on there.

But it’s still HTML and CSS. I’m just using it within a PHP framework that is WordPress. And then maybe there’s some interesting JavaScript stuff that has to happen, but maybe not, who knows?

But then if there’s something else — somebody’s like, Okay, Chris, we’re gonna build a really simple fantasy football app, or something. And there’s going to be stuff, it’s just a little more complicated. There’s a grid of stuff going on, and I can drag players from here to there, and it just feels like a very highly interactive kind of app. I’d be like, there’s a lot of state happening here. It’s really more of an application-like thing. These days, I think React is cool. I’d probably reach for a React Redux kind of situation.

But that’s just today, just because it seems cool and fun, it clicks with me a little bit. There’s any number of other things that you could reach for that would get the same things done, but hopefully that answers the question a little bit.

David [10:34]:

I think that that’s a good formulation. Basically looking at the project and trying to pair it down to what would be the minimal set of complex technologies I could throw at this in order to accomplish the goal. And focusing on the fundamentals first. And I love that you come back to HTML. So many people seem to neglect the importance of having a solid foundation — a solid structure behind how things are organized.

Chris:

So what are yours? Let’s say you had to build this five-page Kombucha brewing site. What would you reach for?

Tim:

All right, we’re doing this. I think one of the sites that I really admire — speaking in terms of simplicity — is Paul Lewis’s blog, which is literally just CSS and HTML. Quite possibly one of the fastest blogs that I’ve seen around, and I always like that approach. If I can just get the job done with that, then by all means. But knowing me, I like to throw fancy things in there when I can. And so some JavaScript would probably make its way in there.

But as you add levels of complexity, I very much like to challenge myself and see what I can do with just vanilla HTML, CSS and JavaScript. It’s always been a challenge for me — How can I implement new design patterns here and really just learn more of the fundamentals of the language without reaching for a toolchain?

And that’s kind of just a personal quirk that I have. Every now and then there’s so much going on, you need structure, especially when there are a lot of people working on the thing. But yeah, my thing has always been standard HTML, CSS, JavaScript, and if I need a database, WordPress is right around the corner.

Chris [12:23]:

Yeah, so that’s what I was getting at — you’re kind of a WordPress person too. But there’s other things. That’s probably one that you and I would both be criticized for, probably, just because it’s like, Oh, you needed a calendar, so you went right to WordPress — little sledgehammer for a small problem kind of thing.

But it’s like, fine, criticize me for it, I hear you. But also, reaching for the tools that you’re already comfortable with, I just don’t think that’s the end of the world. It seems like a silly argument to have, in a way. I’m productive with it, and I get it done, and I’ve been getting it done for a decade using that tool, and you’re still gonna criticize me? Okay, whatever.

Tim:

Yeah, especially if, at the end of the day, you’ve made it something that is completely usable, and fast, and just good. Then, personally, as long as it meets those qualities and you can go edit it in the future, I don’t really care what you use. As long as you’re focusing on the user, maintainability, I think that’s a success in my book.

David:

It’s a tough one, because there are new things coming up that really do add value and that take advantage of new technologies. The last thing that I did, I just pulled out an old WordPress blog and reimported it into Octopress and set it up on the back end of a Sinatra site.

Chris:

Nice!

David:

And Sinatra’s been standing true for me for years and I love it. And it’s just — do a little bit of Haml and Sass and put up a Sinatra site and it handles everything you need to do.

Chris:

There you go. See, I get that. I’ve used those tools a little bit, I’m not afraid of them. But they’re not my go-to tools like they are for you. You just reached for those cuz they’re comfortable for you. And they’ve kind of proven themselves out over years for you, so yeah, I think that’s great. The web’s a good place, there are lots of tools.

David:

I believe that there are there are faster and better solutions on the back end than a Ruby solution — probably something with Node. And maybe something Express. I did a little bit of playing around with Go, but mostly for processing. But I’m really impressed with what it’s capable of, and I love the syntax of Go.

Tim [14:29]:

I have an article that I wrote on Go on scotch.io, and it’s basically just a tutorial with me trying to install it on Windows. It literally took me six hours to get this. It was a Friday night, I was like, I’m just gonna bang this out, and then I’m just gonna watch Netflix or something. Nope, I was up to 2 a.m. doing this thing. So, that’s all I have to offer that discussion.

Chris:

That always feels so scary to me, because even when you’ve got it, it’s like okay, that’s cool, that’s worth celebrating. You got it, I’m glad you wrote it down so other people can find it too. But it feels like it might be fragile at that point then. It was such hard work to get there. What if you’ve got to buy a new machine, because you dropped it in a puddle or something? Are you in for six hours again? Is it brittle at that point? Did you have to do weird hacky stuff to even get it? That always makes me so uncomfortable.

David:

So Chris, actually, what are you playing with these days? You mentioned you’re playing with React. In terms of keeping in touch with what’s happening and new, what appeals to you, what sounds interesting?

Chris:

Well, it’s true, we have a couple of new things that we’re building on CodePen that aren’t out yet. They’re just in development things, that we’ll just be like — we’re just gonna give React a shot, and Redux as well, which includes Webpack and Express and all that stuff too.

So we’ll see how it goes. We’re maybe a month into it. It’s probably many months before hitting production. I’m excited about it.

For those of you that are familiar with CodePen a little bit, we have a PRO feature called Collab Mode on CodePen, and it’s a little bit like Google Docs. When you have the document open, and you’ve sent the URL to somebody else and they have the document open too, you see two cursors there and you can both type together and see what each other are doing.

That’s one of the PRO features of CodePen. Some people need it. When you need it, it’s there. You can go PRO and get it, and it works pretty good. But imagine what’s going on there behind the scenes, which I’ll get to in a minute. But there’s another feature called Professor Mode, which might even symbolize this a little bit more.

It’s similar to Collab, but it’s one-way only. So I’m typing, and I can send this URL to — for example — all of my students if I’m a teacher of some kind. And let’s say there’s 30 people watching you at this URL: as I type, every one of my keystrokes is being shown on their screen too, and it’s not a video, it’s like our actual interface.

You can watch them code, but it’s not just the code: it’s like if I open a menu, the menu opens. If I change a select, the select changes; if I type into an input, that gets synced to them too. So they’re really watching like what it’s like to use this website. That’s state; everything about that is state.

It’s like what’s open, what’s not open, what are the values of things. And we’re like, you know how we should do that? We should make it like a big JSON thing — just a blob of JSON that describes the state of … this is what we did years ago now.

And when something changes, we’ll have a little Pub/Sub model, so like, okay, this changed, then I’m gonna publish the fact that this changed, and I’m gonna have all these clients, these students, have an open connection — you know, a web socket connection — that are just waiting for things to be published.

They’re like, something was published, and I’m subscribed to that thing: I’m gonna see that, change my state locally, and then have the state change — like open the menu, for example, or add a new character to this input. So we wrote our own little state manager, Pub/Sub, web socket thing stitching together technologies and APIs and stuff to make that happen.

It’s totally complicated and it took a ton of work, and that’s why it’s a PRO feature of CopePen. And now you look at how React works: what is React and Redux? It’s just a big JSON object of state. Basically, it’s the same thing, only the actual framework works that way.

When you change state in Redux, or whatever, it sprinkles through the UI and changes the state accordingly. But instead of us doing it with jQuery, and having to write our own Pub/Sub thing, and kind of faking it all — the reason I’m so interested in it is because it’s already what we’re doing.

It’s just we had to hand stitch it together, and now that we’re able to switch to this, we’re like, Wow, this feels really natural. It’s really nice.

David [18:52]:

I like that you’re approaching it, because it’s something that solves the particular problem that you have, not just because it’s the next cool technology out there that people are talking about.

Chris:

Right, but it is a fundamentally different way to think about how to build an app than, like, the jQuery Land that I was used to, and I can see how some people feel pretty strongly about it. I’ve never heard somebody be like, This is the only way to build an app, raaah! — but I’m sure those people are out there.

I just choose not to listen to that kind of thing. But it does feel pretty smart. I can see how this could be applicable to lots of stuff. Okay, let me think about my app, and let me try to describe that app as a JSON blob essentially, and now how can I build out the UI of my site based on that state?

And you can totally do it. You can pretty much do it for any website; you can think in that way and get it done. And it feels so satisfying, because then it’s just like — okay, so all I have to do is change the state and then the UI comes along for the ride, so you’re not writing as much soupy stuff that’s all interconnected. You’re just always changing that. That’s what they talk about when they talk about the single source of truth: there’s not just state happening all over the place. It happens in this one place, and then the UI just changes to reflect that one true state, which I think is so cool.

It is not applicable to every site on the internet. There is lots of weird stuff to talk about. We’ve talked so much already about how HTML is like the thing: it is, and now you’re writing HTML and this super duper weird JSX thing, which the first time people say it, I love that they have this term for it, JSX shock.

It’s just so bizarre that it’s hard to even look at, at first. [Laughs] And then you’re like, This is awesome.

Tim [20:49]:

So, speaking about all the good stuff about the web, there’s a question we haven’t asked before. Thought it might be interesting. Do you have a least favorite thing about the web?

Chris:

[Laughs] Well, if we’re scoping it to technology, I’m not sure, I’d have to think about it a little bit. But we’re all so familiar that what the web is, is we’re solving problems, and we’re building things for people, and people are so often the problem. We don’t have to have a big conversation about trolls or anything, but I’m sure you can all conjure that stuff up and imagine it.

But it’s funny how so often the features of what you’re building for the web has to accommodate for that in such a way that it prevents us from building cool things. In the history of CSS-Tricks occasionally, we’ve been like — Let’s demonstrate how a database works and, to demonstrate how this database works, we’ll make a little chat client.

And we’ll just put up a thing where you can put a textarea and you can type in it and I’ll save what people wrote to that textarea and then the next person can come along and see it. These days, that sets off every red flag in the book, because the second you do something like that on the web, it’s abused immediately.

Even on a really nice, good, generally well-behaved community like CSS-Tricks, there’s going to be awful words and awful things, anonymity plus the Internet, so you just can’t do that. It’s so ridiculous that we can’t have a public place for people to write things without having all kinds of security controls and people controls in place to police that kind of thing.

Again, that’s the job, but it’s just a bummer that that’s the case. Or if we’re working on CodePen, and we’re, like, maybe we should make public chatrooms that anybody can build, or something. That would be the same problem. Or maybe we’ll make some DM system so users can talk to each other.

The tech behind that is easy. The social implications of that are very hard and complicated, and that prevents so much stuff happening from the web. That feature would take us three times as much time to think through from an abuse and social implication, and how do we do it properly, than the tech. The tech part is just almost trivial compared to what it does to a community.

David [23:14]:

It’s the classic UX design issue. Everything could be so much better without users.

[Laughter]

This has been fantastic. Chris, I want to thank you so much for joining us. Where can people find you online? You’re doing so many different things.

Chris:

Yeah, I have ChrisCoyier.net, which will point you at CodePen, CSS-Tricks and ShopTalk.

Those are my three big projects, but yeah, I’m pretty easy to find. You know my Twitter is usually my social network of choice, where I am @ChrisCoyier — C-O-Y-I-E-R is how you spell my last name. That’s just a hodgepodge of weirdness, but that will also point you to things and we can talk and converse and be friends. Social media friends.

David:

Fantastic, keep it weird. Thank you again for joining us on the Versioning Show today.

Chris:

Sure, it was a pleasure. Thanks fellas.


David [24:10]:

Wow. What a powerhouse. He’s doing so many things.

Tim:

Yeah, one of the things that I really like about Chris is there’s just so much energy. When he’s talking on a show, or in person, or if you’ve had the pleasure of seeing one of his talks at a conference, there is really just this powerhouse of energy that comes along with him, and it’s very motivating, definitely for me.

David:

I know, I first discovered him back when he was doing the CSS-Tricks things, because, at that time, as he said, there really weren’t other good resources out there to find out about the ways to accomplish these tricks. And he was putting together some of the most useful information out there.

I liked also the clarity with which he spoke about the importance of structure in a site. I’m one of those people who think back to the bones of the site as being the HTML. But he was also talking about the bones of the interactions on the site being the state that it travels through, and I like the way he visualized that.

You’re walking people through the state of something, and that is the user experience of how it happens.

Tim:

Yeah, and one of the things that led to, which I like a lot as well, was the simplicity first approach. You think about the basic job that I need to get done and select the technology from there.

I like that idea, because it’s very friendly to new developers. A lot of times you’ll see — How do I get a site? You get React, Redux, Babel and Webpack, and then you start building out your thing. In reality, it’s like, look at the thing that you need to build, and if you are a beginner, then hopefully it’s something simple so you don’t go insane trying to figure this stuff out.

And just use the technology, and only the technology that gets that thing done. I mean, that’s definitely how I learned. It was, this is exactly what I need to do, I’m going to kind of put my blinders on and focus on exactly the job at hand. And once I feel comfortable enough, or once I actually need more, then I will go and try new technologies and try new things.

But a lot of times when people email me, ask me, I need some help with my career, or, I want to get into web development, what do I do? I get a lot of questions like, Should I learn React? or Should I learn jQuery? My answer is always the same: learn the fundamentals of language, learn the basic stuff first, start small, and you won’t get burnt out.

David [26:46]:

It’s a challenging thing figuring out what to start with. I think it took me years before I realized that if you want to build Basecamp, you use Rails, but if you don’t want to build Basecamp, you don’t necessarily use Rails. You use something that is more appropriate to whatever it is you want to learn.

I think that it takes a certain level of skill and experience to be able to look at your project and recognize which of the technologies — there are so many — is going to be the appropriate one to support your needs. And trying to pare it down to what is the most basic thing that I could start with, and what’s the smallest piece that I could fit in that can accomplish what I need to do.

Tim:

Yeah, sometimes for me it’s refreshing to look at a project that could take something more difficult to build and simplify it. I work on an ecommerce website, and we’re changing platforms right now, and we had a chance to pick a JavaScript framework and a very robust back end.

And I settled on taking the simplicity approach first — even for that, even for an ecommerce platform, when lots of people are turning their ecommerce platforms into single page applications. And I thought to myself, let’s make this simple, let’s make this just HTTP, HTML, CSS, JavaScript first, and add functionality on there, using a progressive approach.

We ended up with a few kilobytes of JavaScript, a few kilobytes of CSS, every page is server rendered, and kind of bootstrapped into a richer experience from there, and it’s such a relief. It’s such a relief when something goes wrong. I know I don’t have to dive deep into something and just go on a journey.

Most of the time, it’s like, this can only be one of four things, and I just know what to expect. So I’m a fan of boring and simple.

David [28:55]:

It sounds like you’re becoming a mature curmudgeon of an engineer yourself.

Tim:

Maybe just an old man.

David:

I liked that Chris turned the tables on us and started asking us what we do, and what we’re working on. I don’t think anybody’s asked us that before.

Tim:

Yeah, I liked that.

David:

And it gave me a chance to find out more about what you’re working on, too.

Tim:

Yes, very true.

David:

This was a great show, and I really enjoyed having Chris on, and it’s so impressive all of the things that he’s doing.

It was a reminder of just how broad his effect has been on web development and then web education these days.

Tim:

Yeah, in fact, the JavaScript pattern that I use today to build applications I lifted from his site — which I didn’t get a chance to say, but interesting fact.

David:

Well, he’ll find out when he hears the show.

Tim:

Yes!

Well, thank you so much for listening, everybody. We always enjoy getting to talk technology with all of you.

David:

We would also like to thank SitePoint.com, and our producers, Adam Roberts and Ophelie Lechat. Please feel free to send us your comments on Twitter — @versioningshow — and give us a rating on iTunes.

Let us know how we’re doing.

Tim:

We’ll see you next time, and we hope you enjoyed this version.

The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
We teamed up with SiteGround
To bring you up to 65% off web hosting, plus free access to the entire SitePoint Premium library (worth $99). Get SiteGround + SitePoint Premium Now
Login or Create Account to Comment
Login Create Account