Welcome to the One Month podcast. This week on the show we have Chris Coyier!
Chris Coyier (@chriscoyier) is a web designer and developer, and notably, he’s built CSS Tricks which is one of my favorite resources for staying up-to-date with different tips and techniques around HTML, CSS and all things front-end. He’s also co-founded CodePen, a popular coding playground for HTML, CSS, and JavaScript, and he is the host of the Shoptalk podcast.
In this episode we discuss:
- How Chris Coyier learned to code
- What’s a front-end developer?
- What resources does Chris Coyier use to stay up to date on web dev?
- Lessons learned from over 300+ episodes of the ShopTalkShow Podcast
And of course we’ll talk in depth about two of the best resources for front-end beginners:
PS. 🐶 Please subscribe and rate the Learn to Code Podcast on iTunes! ❤️
Here is my interview with Chris Coyier:
About Chris Coyier
Chris Coyier: I was born and raised in Madison, Wisconsin. So a Midwesterner who took off, which is so funny because I’ve lived all over the country now, and there are always people I can find from Wisconsin there. I feel we grow them in the Midwest and ship them out, you know.
Chris Castig: Oh what’s going on in Madison, it’s fairly urban, yeah?
Chris Coyier: Yeah, and it’s a huge university town, so I think it’s a couple hundred thousand, maybe 100,000 when I lived there when I was a kid. But it’s a perfectly nice little town, the Portland of the Midwest or something; it’s just kind of a liberal, fun, smart town in a way.
But I lived my whole life there, so it’s hard for me to say that and see that now, but you know when you’ve lived there your whole life and then left, I was kind of like yeah I don’t see myself going back there. Sorry family; loved it and all, but I’ve kind of gone from there. But I really lived all through college there, I didn’t go away to college, I stayed home and then worked there for years afterward.
So I was in my young 20s before I even really got into the Web and what I do now, and that kind of opened up some freedom for me. So the first time I ever left Madison, Wisconsin was through having landed my first job doing Web stuff and having that be so clear that I could do that from anywhere.
I think a lot of us are clear on now, this is a job that’s very remote friendly, and in those early days I just went to my boss, and I was like “Listen I want to leave, like leave-leave, not just your work from home a couple of days a week or something.” “I wanna work from home five days a week, I wanna come into the office never. I’m going to live across.’’
Chris Castig: Who says that to their boss? I mean pretty much only web developers these days can have that freedom.
Chris Coyier: No. It’s true, and it was ballsy to pull off, but I did it, and I didn’t do it rudely I hope. But I said it is kind of take it or leave it in a way; I had to pull a strong arm because I was leaving anyway, very set in my ways on this. I’m like I’ll find a job out there if I have to.
I can tend bar, I can wait tables, that’s what I was doing anyway part-time. I’m not that worried about this, we have a good relationship going you know, we chatted all day on AOL Instant Messenger at the time anyway to keep in touch.
All of our client work was with email, so I sat down and I was like ”Listen I gotta go, I like this job though, I’d like to keep it, but I’m leaving either way, so if you don’t want me to work remotely, then sorry I’m leaving.” And he’d been on it, this way back a whole bunch of years ago.
What that your first job as a web developer?
Chris Coyier: Yes it was, I was a web developer, and there were like three people: The boss man and then a print production helper because it was mostly a print shop, they got to have logs for companies and stuff.
Chris Castig: That seemed to be the big trend was there was a lot of print places that were trying to get into digital. That was like the running.
Chris Coyier: I mean they still are, not a lot, but still there’s some like ‘’hey, we’ve been producing this catalog for 20 years we’re going to continue producing this catalog, it costs a lot of money, and we can hire some employees around it, and digital just isn’t our thing, we’re just doing design work or whatever, or branding or who knows what all.’’
But this company, it was small enough, and work was just hard enough to find in Madison that whenever a client was like “Hey can you do the website too?” – The temptation, of course, was to say yes.
And I think they said a lot of yeses, and then they had a web person who just got up and left one day, as employees are, you know? And they needed somebody super urgently and that’s how I got in the door and was just like “I can make websites, hi.” Well, take me.
When you were young, how did you get inspired to learn to code?
Chris Coyier: Well yeah, but not at a coding level. I was just a computer nerd from maybe early middle school on, just through falling in with that crowd to some degree, having friends who liked computers too. And in those days, it’s mostly just games.
Chris Castig: Playing games.
Chris Coyier: Yes and no. I think of a gamer kid now as a little different; you play really fancy all engrossing games just forever. And I feel like back then, we just, I don’t know, it’s like we’re into games, but it wasn’t quite as life-consuming as they feel now. I don’t know, maybe that’s a half-baked thought.
But anyway, we still liked games and would play them, and then it expanded. I just liked being around my computer. I did other things too, then I remember getting on AOL and thinking that was so cool.
And then my mom’s got a bunch of computers at her work, what do they do? Oh, I see, they do print production work there. That’s interesting, maybe I could learn about that. And just anything computer-related, you know the type, you’re just a computer nerd, I was a computer nerd.
Chris Castig: Yeah, I once heard somebody say that looking back, all the people that we said were computer nerds, they really just discovered computers before we did. Because now, everybody’s a computer nerd, like everybody’s found computers.
Chris Coyier: Oh yeah, I’m sure that the average person today spends more time on their computer than I did as a nerd back then.
Chris Castig: There you go.
Chris Coyier: You’re right, that’s interesting.
Chris Castig: You were a computer nerd, you were playing games, so does it sound like maybe this idea of learning to code came gradually because you were hacking away at things or just kind of like pulling apart programs?
Chris Coyier: Yeah it was always design because I always thought maybe that would be my way in, ’cause I was into ceramics at the time, and there’s just something about the concept of being a designer that appealed to me then more strongly and still now, like still now, I feel like, oh I wish I was a good designer, that’d be the best, like I still really.
Chris Castig: Were you a designer, at the time?
Chris Coyier: Kind of. I feel like I was or I wanted to be so much, or that was the part that I enjoyed the most. If we’re talking web specifically, this probably took me until after college, because I went all through college to get an art degree.
I kind of fancied myself as a designer although just into art period, but then it wasn’t until after college when I was more willing just to spin up a website. I’d be like, “Oh we need a website for this thing, “don’t worry I’ll buy a domain name, “I’ll point it at some hosting, “and I’ll throw up WordPress on it or whatever,” which I still do.
But then immediately I was like, ”of course I want to exert control over this, I want to bring my artistic sensibilities to this and do things my way, I know what looks good.” I want to exert my own self onto this website, which was the only way to do that is HTML and CSS, it still is kind of as a core.
And so I was like, “I want to edit this theme, “how can I do that, let me get into this CSS file, “oh this makes sense to me, I can just change colors, sizes and do all that stuff in here.” It got to the point where it was so fun, this isn’t just like I’m learning some little skill ’cause I have to or something. I was like, “This is amazing, look at how awesome this is, I feel so cool and powerful being able to do these things.”
Chris Castig: Yeah it is like power, I know what that feels like, yeah.
Chris Coyier: It is, it just clicks in the right way.
Chris Castig: And then people are really impressed because they also don’t know how to do it, so they’re like, “That is so impressive,” and you’re like “I guess I’m kind of impressive.”
Chris Coyier: And there is some extra drug feeling in there too because you’re like, ‘’This is at a URL that anybody in the world can…’’
Chris Castig: Visit.
Chris Coyier: And if I do good enough of a job if you have any entrepreneurial spirit anywhere in your guts that is really appealing. Because you’re like, “What if I do a good job and tons of people come to this website, can I extract money from them in some way, can I put ads on here, can I, I don’t know; sell something?”
There’s some kind of spirit that if you do a good enough job here, maybe it’ll just be just beer money or whatever, but maybe it will be a more significant thing.
Chris Castig: You hear those stories, I mean till this day for sure, that’s amazing.
Chris Coyier: Yeah.
Was that the first website you built?
Chris Coyier: I have a few early memories in college, making a little Flash website that was supposed to be a tribute to an artist kind of thing and I vaguely remember working on that. I remember the end product was like a CD or something that you put in a computer to look at.
We definitely didn’t go as far as getting it onto a real website. So does that count? I’m gonna say that that doesn’t count maybe.
Chris Castig: Like a CD-ROM, I’m picturing?
Chris Coyier: Yeah, right.
Chris Castig: That’s what they’re called.
Chris Coyier: Or something. I guess at the time we had a bunch of Macs with zip drives on them. Flash at the time was kind of for the Web. I mean that was the point of it if you weren’t making something for the Web, or the Flash wasn’t totally necessary. You’d use something like Macromedia Director to make it, it didn’t matter. It was just a deliverable file.
Chris Castig: Yeah, I remember all those flashes, Flash was huge.
Chris Coyier: I mean I learned a little bit of it to do that, but the first website where I thought ”Oh, I better buy my name, and put something up about my name.” I recommend that very strongly till this day to learners because what’s nice about that is that it is your responsibility, but it also gives you these stakes.
You have to do a good job with that, you are going to start showing up in Google searches for your name now, which is good. You kind of want to start establishing that as early as you can. And then you have this real project that really matters, in a way that if you’re just poking around or just playing around and watching some videos or something that you don’t quite have any stakes; like if you just walked away tomorrow and never did anything again, it wouldn’t matter, nobody would care.
But there’s something about having something online under your own name, where you have to care.
Chris Castig: Yeah, there’s something like, I want to say almost immortal about it because if you think about the way the Web caches and even the archive project. I mean, if you’re putting something on the Web, there it is, you’re putting it out there.
Chris Coyier: It may just be forever, hopefully it is.
Chris Castig: It may outlive you one day. That’s fascinating, it sounds like you were learning these things as you were building them. What’s your process for learning a new language, how did you even know how to buy a domain, what do you do to learn something new?
Chris Coyier: I was probably working at some little shop, that had a website or something, and I knew it can’t be impossible, of course, people can do this, there are millions of sites. It’s just like you’d learn anything. Alright, let me just Google it, oh here’s a website, these things are only like 20 bucks, I’ll buy one of these.
So I don’t know, I can’t remember exactly what the learning resources were back then, but I can tell you that they were kind of terrible, it probably took me a while. There wasn’t a lot of training tutorials certainly back then, no One Month or anything.
What’s your favorite domain registrar?
Chris Coyier: Yeah kind of. I’m sure back then I probably used GoDaddy, and I still have 90% of my stuff on GoDaddy because there are various reasons. I mean they kind of went in and out of like good and lousy UX, and they’ve had questionable management and…
Chris Castig: Ethics.
Chris Coyier: There have been some issues. Yeah, but there was one time, and this is a totally unrelated story is that I had some packer problems. I had a domain name stolen from me. It’s kind of funny if you think, how can somebody steal a website? Oh well, they’re public, somebody could just get in there and steal all the code from your site and put up another website that’s exactly like yours, wouldn’t that be terrible?
Well it kind of is, but it’s not nearly as bad as having your domain name stolen, that’s like the worst thing that can happen to you online. When your domain stops being in your control, it’s ripped out from you. And it is a pretty difficult thing to pull off on somebody, so they need to really know what they’re doing as criminals to do it properly. But it happened to me, it happened on CSS Tricks many years in, when it was credible valuable property to me.
Chris Castig: Somebody stole CSS Tricks?
Chris Coyier: The domain name, yeah. And when they do it, these criminals are pretty advanced in the way that they do it. They don’t just transfer it from one domain registrar to another, they warm-up a whole string of domain registrars that are ready to accept a new domain, and then right away they transfer it off.
So as soon as CSS Tricks was stolen they transferred it to one, transferred it to another, transferred to another. So that way if you ever want it back, if you’re gonna fight this fight, it needs to traverse the same exact path all the way back to the original registrar, and it’s such a pain in the ass.
Chris Castig: Good Lord, did you hire someone to help you with this?
Chris Coyier: Well you know who did it all the work, Go Daddy did all for me in my name. Go Daddy went to war for me to get it back because it was in some way their fault, they played some part in the problem of it, not a big one.
But yeah, when somebody goes to bat for you like that, I feel like that’s just the kind of loyalty that is hard to buy, and I just think that the people there did right by me, and there you go.
Chris Castig: That’s great, man, that’s actually really good to hear. You gave the advice to buy your domain name as well, it sounded like that was part of what you were saying. But I’ve also found that I’ve bought domains and if you let them expire, somebody snatches them up and you, there’s like this squatting that happens.
Has that ever happened to you, or do you have any tips on what do you do with that?
Chris Coyier: Yeah well, it’s because it’s like Grey Hat work, it’s probably the domain registrants themselves that do that. It’s probably been proven that they sell again generally if somebody bought it once for years, it probably is worth something to some degree, especially if you can buy it really inexpensively like they can, for pennies.
Who knows what they pay for them because they’re their own registrant. So there’s nothing illegal about it, it was your fault, that’s just the way it kind of is. Is it like super-duper ethical? Maybe not.
Chris Castig: Grey Hat I love that, yeah that makes a lot of sense, cool.
Chris Coyier: Even just searching for them, if enough people search for them, that triggers some kind of algorithm sometimes that makes the registrant themselves pick it up.
Chris Castig: What was the first job that you got paid for, and how did you apply or how did you get started as a professional?
Chris Coyier: That’s what I was, that’s that one where I was just like; ‘’Oh they need somebody right away.’’So I threw my hat in the ring, but it was kinda like ”Oh gosh, we have some clients right now that we’re in this, we’re halfway through building their website, so we gotta finish it.”
We have one client that we told that we would build a ticketing system for their website, to buy tickets for events that they host, they are magicians in Wisconsin Dells, the Rick Wilcox Magic Theater. I think Rick is great, I think their show is really cool, I was so happy to be building that website for them. Had I built e-commerce, a data-based e-commerce system before, absolutely not, that was very nerve-racking for me. I would think that stuff is still happening to people, for new developers it’s like, hey can you build me this thing, and then the requirements for it are like above their head.
Sometimes you get you just get thrown into the deep end, and you’ve gotta solve it. Fortunately the early days of me learning websites was through me throwing up a site like a WordPress site and hacking on it. It turned out that’s a nice foundation for me because WordPress is such a big platform, you can generally find add-on type things to it like a ticketing system, that meant that I wasn’t totally on my own.
It was hopefully just a matter of just installing and configuring this thing, and hopefully, we have some workable system. It was certainly more complicated than that, especially back then, almost 10 years ago now. The marketplace for that type of add-on stuff wasn’t nearly as evolved as it is now.
So I remember there was no quick and easy plug-in to install, but it was kind of a combination and writing a little bit of custom code and hacking things together to get it to work. But when you’re really thrown into the fire like that, you level up so quickly, and you either are like “Wow that was a really fun challenge that I got done,” or “Wow that was stressful this isn’t for me.”
How did you start CSS Tricks?
Chris Coyier: What a cheesy name isn’t it, you weren’t there to interact with me at the beginning. If somebody hadn’t heard of that site, you know like Chris from CSS tricks.
But as funny as it was right at that time, I started it right at the beginning of when I got that job. And it wasn’t like ”I’m gonna have a blog about building things for the Web”, I mean it kind of was, but it was nothing, nobody was reading it, I didn’t know what I was doing.
I was just kind of throwing it up for fun, in fact, it was a part of a network of a bunch of little sites. You know I spun up a whole bunch of WordPress sites to be little kind of help sites with the very lame small entrepreneurial goal of maybe if I write enough on these little sites and put enough ads on them, that there really will be beer money or better someday.
And all those other sites kind of fell away because of disinterest and some of them were Adobe related, which is kind of funny it was like ‘’photoshophelp.com’’ and Adobe was like – no you can’t do that.
Chris Castig: Oh, so you were doing like a CO kind of place trying to get some keywords.
Chris Coyier: A little bit, yeah. Because we didn’t know what we were doing I wasn’t that serious about it, it was just a little fun side project entrepreneurial thing. I had done many things like that. I don’t really think of myself as a super strong entrepreneur, but I do like the idea of having a little moderate success with side projects kind of thing.
I feel like even today, my career is just an amalgamation of side projects that grew up a little bit because I did. But anyway, I started CSS Tricks during that time, and it was just dumb, I would just write small dumb articles about HTML and CSS. And I think that all articles that are that old on the site are not particularly valuable anymore.
But it was really just writing consistently over a really long period of time. And then the quality gets better, the quantity gets better, it’s just a little site that grew up is all.
Chris Castig: Yeah, you are so prolific on the site, how many blog posts do you think are on there total and do you retire old ones, or do you just keep them up?
Chris Coyier: No, I don’t pull anything down, I haven’t got too much flack for that really. In fact, at least once a week I have a couple of tabs open on my browser that are like, they’re kind of old ones that I just know when I have like 15 minutes quick, I can just hit edit on it and go in there and clean it up a little bit.
Maybe point it at some new post, indicate it by just putting another paragraph in there that’s just like, “Hey update, this is a little old, “but we’ve covered this more accurately in newer articles.” I don’t have a hundred percent coverage that way, but if I just fix the ones that come up in email or come up in comments, or come up through my own searches, I can generally keep things pretty up-to-date that way. As far as how many are on there, oh my gosh, I’ve probably written like 10,000 blog posts.
Chris Castig: Oh my God.
Chris Coyier: To date.
How long does it take you to write a blog post?
Chris Coyier: Almost never more than a day but sometimes I stew up on one for a week or two and make little changes to it, but usually, a blog post is only an hour or two at most. But that’s not advice for anybody necessarily, I think I’m a little quick and sloppy about it, and generally, I think you probably want to be a little slower than I am.
Chris Castig: Yeah, Chris this is amazing but just give me some math on this. If you wrote 10,000 blog posts, and I know that you don’t write them all, but that would be writing every day for 27 years.
Chris Coyier: Well because sometimes there’s four in a day.
Chris Castig: Wow.
Chris Coyier: It actually doesn’t look like it’s that many, so we’ll have to tone it down a little bit, but it’s probably like there’s probably 6000 some on CSS tricks. But then I’ve guest blogged all over the place. There’s the CodePen blog, there’s the ShopTalk where we do the writing, there’s my personal site where I have a ten-year history of writing blog posts. If you added them all together probably is getting close to 10,000.
Chris Castig: Got it, I wasn’t trying to call you out, I was just curious.
Chris Coyier: No, but yeah, it’s crazy that’s the number.
Chris Castig: Crazy, right?
Chris Coyier: A couple of them are hits, then you know when you start doing okay.
Chris Castig: And that’s super inspiring for me or for anyone starting a new project. It’s just interesting to be like ”Oh wow it’s over 10 years, that many blog posts, there have to be some hits in there”, and clearly there was early on, but that’s really inspiring, I love it.
Chris Coyier: Anyway, you think back it’s such a different world now, I wonder how things are gonna change, it seems like it’s mostly for the better. I feel like if I was the same person as I was back then, and I was looking at onemonth.com or something, I’d be like I’m gonna take this.
I feel like I would do it, I wouldn’t have tried to hack it myself or, I used whatever was in front of me. I wanted any resource I that I could get my hands on, so it’s almost nice that people, newcomers have this stuff today.
Chris Castig: Yeah, I mean I felt the same way when I started learning to code, 2002-ish. I remember taking courses in college, and the teachers were learning on the fly, they were learning Dreamweaver or something like that.
But I think the thing that I’ve noticed, and I’m curious if this is the same for you too is, it’s not just about One Month or any school or any book, but it really is just about kind of brute-forcing lots of things, until something works. The people who I know who are successful, they use lots of different materials and just kind of go at it. Do you find that that’s still kind of what you do, or have done?
Chris Coyier: Yeah I feel like there’s some kind of like, of course, nature to that in a way. I’m trying to formulate this in the right way, but I’ve used in this, apologies if this is a trite metaphor; I think people, for some reason, learn something like guitar or piano or saxophone or whatever like in a culturally correct way.
People think about how to learn it, in that they’re like, “Oh if I’m going to learn to play the piano, I’m really gonna have to dig in, it is not gonna come to me overnight.” “I need to get sheet music, I need to watch videos, maybe I’ll consider taking some lessons, maybe I’ll consider going to school for it or taking something even more structured, and I’m gonna listen to lots of piano music.’’
And people get that, nothing is confusing about that. They’re like, “I’m just gonna have to hit it hard if I’m gonna learn this kind of thing.” And then they also are aware that if all they do is noodle around on a little bit and they don’t get better at it, they’re like “Oh I didn’t hit it hard enough, I didn’t practice hard enough”, and that kind of should extend to anything, and it just doesn’t for some reason.
Some people try a little bit of coding, and they’re like “No I didn’t get it right away or something, so I stopped.” You’re like “Well you didn’t hit six ways to Sunday as anybody else would, or it’s just it doesn’t matter what you’re trying to learn, it could be cooking or a new language or anything, it’s all the same, you gotta hit it all the different ways.
Chris Castig: Love it, I totally can relate. Well people listening right now, people that are learning to code themselves, who are looking for resources, what can they expect from CSS Tricks, what are some, maybe your favorite blog posts, or just reasons that they should come and learn from CSS Tricks?
Chris Coyier: Oh well, that’s an excellent question. I kind of think of it as it’s two-headed, what we don’t serve at all, if you’re learning, don’t just land on CSS Tricks and look around the site for some kind of ”where do I start” type of thing. That’s kind of our failing, maybe we should have something better about that, but it’s just not a course driven, start here and here kinda place, it’s just not that at the moment.
What it is, is that I hope that some people and I know this is true no matter what, some people land there through Google searches, because we’ve been around so long and there are so many resources on the site. There are forums, videos, of course, there are blog posts, but there’s a whole almanac of CSS resources that cover all the properties and values and selectors in CSS.
There are videos, and a job board and curated guides, and all kinds of content all throughout the site, but you land there through a Google search because you’re like “oh how does the intersection observer work again?”And I try to make that landing experience strong, that you can find what you need and it’s helpful to you, and it’s in plain helpful happy English, that’s my goal with that. So that’s one way that you can engage with CSS Tricks, just to click on it in search results because hopefully, it’s gonna solve the thing that you want it to.
But I also hope that you just check it out, like a newspaper. Sign up for the newsletter if you feel like it, we tend to part of that newsletter as unique content, but part of it is just like hey what did you miss on the site this week. So you can easily kind of look at that or subscribe in an RSS reader or just pop by the site and scroll around it to see if anything is interesting to you.
That’s how we think of it, as a publication like a trade magazine. You read it because you flip through it because it might have relevant stuff to what you’re working on. Or what you’re interested in because it’s niche anyway, like if you’re a friend and web developer, I think you’d do well to stop by once in a while or subscribe in some fashion because it’s essentially a trade mag.
Chris Castig: Yeah, that makes a lot of sense. I think at first I found through Google, a lot of things I remember are some of my favorite things. I remember you had one that was four tips for optimizing a website, there was a video with it. A lot of things had animations that are helpful, like how to interact with the back, just these kind of little things.
Your learning is necessarily going to be like day four of this class, we’re going to learn this because it maybe doesn’t come up until you actually have the problem in your building. And it’s at that point when you’re like “Dammit, what’s the best way to speed up the site?” “Dammit, what’s the best way that I can make the footer sticky or whatever problem I was having.”
Or make fluid columns, and it’s like those specific things, and I think knowing that you can probably just Google CSS tricks, fluid columns. That’s your framework for this, and then that’s generally the way I’ve used it, so it’s cool to hear you say that that’s the way you want it to be used.
Chris Coyier: Well, it has to be a business too because people work for it. There’s a business model behind it also which is largely sponsorship/advertising focused, and you can sell that around traffic to some degree. You can say these display ads are worth some money because they get a lot of impressions, so that’s desirable to be on there in some way.
Chris Castig: But so that’s cool, that supports that business model in some way. Just having traffic because of your archives.
Chris Coyier: But then there’s like the idea of a sponsor blog post which we generally do once a week if you can sell it. And that requires that people read your site on the regular, that it comes across their feed or whatever because they’re a subscriber. So what we do, what I want it to be a sustainable thing that we can do, that makes sense to produce but also has a sustainable business model to it. So those two things have to go together.
Chris Castig: I’m sure that a lot of people listening, because this has come up in a lot of questions for me, would love to get to make a site that’s something they’re passionate about, get viewers and then monetize it with ads. How do you even kind of plug into an ad network or is there just one big one like Google that you’re using or do you actually do all the deals with specific people?
Chris Coyier: Yeah, it’s really kind of half-and-half, but we don’t use any major network.
Chris Castig: I wish I knew more about this really.
Chris Coyier: The reason I don’t need to is that it just has naturally evolved through so long that it’s kind of just fine the way it is. I haven’t had to reinvent our advertising inventory over the years so much. It’s just been kind of a long-standing relationship with the community called Buy and Sell Ads which just so happens to have specialized in the monetization of sites that are in the web technology sphere.
Because there’s a whole bunch of big companies that need to reach the type of techie people that read CSS tricks, so it’s not too hard to find companies in that market. I don’t know, some project management software, form software, some kind of API driven software that’s nice too, they’re focused on what they’re doing and they need some developer eyeballs, so they buy them from me when they can. And I’m just a small fish, but that’s how that works and so Buy and Sell, it kind of bridges the gap.
They talk to those companies, find them, sell the ads whatever but then that’s maybe half of that and half of it has been personal relationships forged over the years too, which I’m lucky enough to have. As far as if you’re new though and you’re like “I wanna make a site for box cars, I don’t know, my favorite, I’m an arborist, and I wanna have a website about trees or something and somehow monetize it in some small way.”
It’s a brave new world out there, and it changes all the time so even if you manage to get good at it in 2019 or at least know the players and stuff, that doesn’t mean you just know it forever. Because it changes all the time.
Display ads had their heyday, and they bust, and now they’re coming back a little bit, and sponsored content got big, but it’s not guaranteed to last forever. Then there’s paid newsletters those are somehow popular right now but who knows if that’ll stick around? It’s tough, the business is just a hard place to be.
Chris Castig: Yeah that’s so fascinating. I just think, these are all things that I’ve been through as well and I’m sure a lot of people listening are wondering the same things so that’s great.
Chris Coyier: Right. Or you could write a book. Well, you used to make money writing books, but I’m not so sure anymore. It has to be the perfect book at the perfect time to do anything good. It ends up being hard, you gotta to be entrepreneurial about it to some degree or go work for somebody else.
What is Codepen? Why should developers use CodePen?
Chris Coyier: Well, part of it is CSS tricks related in that it makes sense to, CSS tricks is full of tutorials: ”here’s how we do something, here’s a chunk of code that is what you do, it’s so compelling to look at that like for real, I don’t need just a chunk of CSS, I need to see it work, that’s the most compelling way to look at a demo.”
You can’t just read about it, you can’t just look at a block of code, you can’t even look at a screenshot, you can but it’s not nearly as compelling as seeing it work in the browser nor is it as true and believable when you’re actually seeing the results of it in a browser. At some point, I was like “Maybe I’ll, there are some other players in this market.” Certainly, JS Bin and JS Fiddle are two sites that are still around today that are earlier than CodePen, and those apps had this kind of ground-breaking at the time.
I thought a way of doing this for front end which is being able to look at the code in multiple panels like regular HTML here, your CSS here, your JavaScript here. It will show you the output at the same time in one browser window. It’s all together in one browser window, and I was like, “This is so cool, I love these sites, there shouldn’t be a single demo on CSS tricks that isn’t moved over to this system because it’s just better.” It’s easier to maintain, it’s better for users to look at, it’s better for us to look at, it’s just better.
But I was kind of like “Well, it’s tricky.” Because at the time I was like, “Well, our demo sites actually get a lot of traffic.” So I wrote a PHP include on the top of it so that I could put our CSS tricks branding on it, I could put a link back to the article on it. I knew I had a little bit of web real estate there so maybe I could put an ad on it someday, I don’t know, maybe. I hadn’t yet, but I thought why give that up?
Even at the time, I think all of us are aware that websites to some degree kind of come and go. Things get shut down in ways that aren’t always pleasurable to us all and to take something so important to your company like every demo on your entire site and put them on some other site that you have no control over. I can’t brand it, I can’t put ads on it, I can’t control that it’s not gonna shut down. It was just too risky, so I was like “Why don’t I put a weekend project together with some of my friends who are itching to do more side work kind of thing, and we’ll make a little clone of those sites in a way.”
And so we did, but it just grew up from there. Right away we were like “This is actually pretty fun to work on, this is a pretty cool little product too.” We know that we’re in a sense, stepping on toes or something but JS Fill and JS Bin, really to these days I think they both have sort of kind of tried to have some type of business model. I’m not entirely sure if they still do or are still into that or whatever, but they were, they’re just free, and we’re like, we’re gonna come in here and try to do a better job if we can.
And have it be an actual company somehow which is a little tricky because so many of them are just full on free and obviously we have a compelling free plan hopefully too that mimics what most of the rest of them can do anyway. And then our Pro plans are just stuff that’s on top of that.
What type of developer uses CodePen?
Chris Castig: Yeah, tell me about that, so it’s cool that I love how you are inventing this. It came out of your need, a problem that you had. I didn’t know that story, but totally I knew JS Fiddle for a while. I was using that before I saw CodePen, so it’s really cool to see how that influenced you guys. So that all makes sense. How about now, who comes, who’s the main customer or developer using CodePen if it’s not just reading the examples on CSS tricks? Who’s actually tracking?
Chris Coyier: Well, that’s so true, and I wish I had the perfect answer for you. Well, who’s the perfect person to come to one month.com? I mean maybe you have a firm grasp on that, but even all these years later, we are still sort of trying to figure that out to some degree. There are some clear ones like I don’t know I’m a developer at an agency and I use CodePen to occasionally whip demos together, to show my clients and those demos need to be private.
And private is a pro feature on CodePen, so we upgrade to Pro and use the privacy feature in that way. That’s a pretty common use case for Pro. Now the use case for a CodePen entirely is just anybody who ever makes front end design or works as a front end developer. You can benefit from having a free account, I mean what the heck, throw up a few pens on there so that you have a bit of a presence.
So it doesn’t hurt because Code has pretty good SCO as well, so maybe people can find you that way a little easier. Some people use it a little portfolio and get hired that way or use it to show off or maybe they only do private stuff but they, we have this concept of collections on CodePen, so they gather up inspiration together. There are all kinds of free usage but then trying to track down exactly why people upgrade to Pro is a little trickier.
We’re always trying to figure that out, and sometimes you do a good job, we’re nine people now and profitable. And that’s great, I mean that’s something to be proud of, but at the same time sometimes we’re like “God, I wish we could hit it a little clear.” Like if we had a perfect client we’re still figuring things out, don’t you feel that way?
Chris Castig: Oh yeah, never runs, I get it.
Chris Coyier: A marathon.
What have you learned making the ShopTalkShow Podcast?
Chris Castig: So you’re working on CSS tricks — and then what made you think, “Hey, now let’s start a podcast”?
Chris Coyier: Yeah I mean that was simple kind of natural progression too is because we weren’t the first coding podcast on the block either. I don’t know who gets to claim that, the rights to that one but by the time Shop Talk Show came around, I had been invited to other things like that, and I can’t remember if they were straight up podcasts or if it just was the opportunity to chat live with somebody, who knows what it was?
But I remember feeling like “God, this is fun.” It’s fun to just chat live with people, especially about something so nichey and so nerdy that I kind of don’t get the chance to talk about in my normal life. I also knew oh my gosh I have done project overload a couple of times by now in my career to the point where I’m a little trying to be more careful with what I say yes to.
Chris Castig: Yeah.
Chris Coyier: And I’ve kind of learned better now, but it’s still a balance, so I guess at the time I was feeling like I really want to do this. But I’m not gonna do it alone at least I’m gonna split the work, and it needs to kind of feel right, not something I’m trying to jam out the door, and I was just waiting around it was really Dave‘s idea.
Dave wanted to do it, and of course, I was a fan of Dave, he’s just hilarious and just a good developer and an interesting guy. So to have Dave be the guy to ask you and be willing to basically do half the work of putting the thing together was kind of a no-brainer. And every choice we’ve made since then after recording this first episode has been like ”how can we basically do the very minimum to make sure that this thing is of an acceptable quality level but takes so little effort from us?”
I can’t, even now after 300 and something episodes and some degree of success with the podcast. It’s not a big part of my career or Dave’s at least financially, it’s just a small little thing. The reason we keep doing this it’s not that much work, and we get a lot out of it, you get some kind of clarity of thought and introduced to interesting people and interesting ideas, and on the whole, it’s absolutely worth it.
Chris Castig: Yeah, I love that. You’ve done 300 episodes, that’s wild.
Chris Coyier: Yeah, which is one a week so it’s like seven years.
Chris Castig: Yeah, good with that. What about of all those episodes, which one stands out as being maybe one of your favorites or that you’d suggest someone listening should go check out first?
Chris Coyier: Oh sure, I think it’s nice when we hit a topic just at the right time, it has been kind of fun. I remember in the early days of the concept of CSS and JavaScript we had a panel discussion about that. I remember really enjoying that because it just was the right people at the right time to kind of disagree about it to some sense.
Chris Castig: What was the disagreement? Whether you should use certain words for…
Chris Coyier: No, I mean it was such in the early days that even it might be weird to even listen to now because things have evolved so much that I don’t think we probably were talking about it quite correctly. And I think even in the podcast we were like ‘’let’s not call it CSS and JS.’’
In fact, we definitely didn’t accept the title of the show. I was like “Let’s just call them what they are, in-line styles.” And when we got arguing about that or whatever and whether that is truly what they are or not, but nobody truly really disagreed with that so strongly at the time. Yeah, they’re kind of in-line styles, which is funny, now that wouldn’t go over well.
People would resist that temptation and I was almost feeling like I was trying to brand them in those early days almost to stir up negative sentiment. Because I was almost trying to teach people like “Hey we’ve done this in the past and it was a bad idea so let’s call them that name.’’ That already has a negative connotation to it.”
I feel much differently now but it was just a good one at the time because sometimes it’s nice on podcasts to all just agree with each other, but sometimes it’s nice to hear some actually dissenting voices.
Chris Castig: Yeah, it’s interesting and you’re right. So much changes in Web and in five years, 10 years, so much changes. Is there a more recent episode, I know you did this front end series or something that you think would be as a particular guest? I mean there’s so many things.
Chris Coyier: Yeah, we’ve been into series lately which has been kind of fun. We did this ”How To Think Like a Front End Developer” series which I enjoyed doing. Because I needed kind of a topic to talk about, sometimes you get invited to speak at conferences, and I was like “I think so strongly about this job that I have and how weird it is right now, maybe I’ll put a talk together on that.” What is a front-end developer these days? Does it have any meaning?
What’s a front-end developer? How would you define it these days?
Chris Coyier: Well we had Mina Markham on the episode and she put a point on the fact that it’s the browser, it’s the client itself that if you’re primarily working with, in that kind of deep way that we do. That’s what makes you a front-end developer, you’re a browser person that’s essential in dealing with the client and all of its quirks, but obviously, there’s still a million things to talk about there.
So what I wanted to do for my talk was to not just have it be me and my thoughts, but to have it be as many or more people’s thoughts. So I intentionally chose different people like Peggy Rayzis from Apollo is a great front-end developer. She’s so focused on graft UL and the data layer of the front end, that’s what Apollo does, and that’s what she’s really into and talks about, and that is so far away from somebody who considers themselves like an HTML and CSS specialist.
They’re both front end developers ’cause they work on technology that runs in a browser, and they’re both caring about users, they both care about accessibility and building websites, but their day-to-day work feels like it just couldn’t be any different.
Castig: Wow that’s great. I never really thought about it.
Chris Coyier: And yeah they both even self-identify as front end developers and job boards just willy-nilly throw up “Hey we’re looking for a front end developer who applies for that job.” Peggy or Brad Frost or Samira Capillo, which person is right for that role, knowing that the spectrum of knowledge is so crazy to want a front-end developer.
So that series I think is good and digs into that idea and it doesn’t necessarily come up with any conclusions. But it comes up with this actually what has been a bit of a problem at least from the communication and hiring angle, so because this is so confusing these days if there’s any wisdom to be taken from this is that this terminology is too broad right now. And if companies are hiring, they need to use their words a lot better at describing what they need.
Chris Castig: I love it, this is great. Well I wanna give you just a few rapid-fire questions to finish off.
Chris Coyier: Yeah I got one quick one for you though too, remember when I talked about the CSS tricks domain name?
Chris Castig: Oh yeah.
Chris Coyier: It got stolen, and I actually got it back. I never met the person, but the criminal was willing to talk to me, and there’s an episode of Shop Talk Show where that criminal through various obfuscation methods, I got on to Skype, and we had a conversation recorded and published at the Shop Talk Show back in the day, with the actual criminal.
So they talked about their motivation of why they did it and just got into their criminal crap and they never, they didn’t apologize or say that it was wrong, what they did in any way, it was just kind of let’s talk about this.
Chris Castig: Do you know their name or? I guess you, maybe afterwards I can try to find that one out from?
Chris Coyier: Yeah, it was called his interview with the hacker or something.
Chris Castig: Interview with the hacker.
Chris Coyier: I’ll send you the link.
Chris Castig: I will find that, and I’ll put it in the show notes for the podcast. I love it! Okay, I got a few rapid-fire questions. So what is, just in your opinion, all your opinion what is the best language to learn now if you’re looking to learn to code and specifically if you want to get a job? I know that’s super broad but is there anything trending, comes to mind?
Chris Coyier: No, I mean there’s no doubt about it. I mean it’s definitely JavaScript. There’s no other alternative that I mean, I’m sure some people might argue for Python or being an EWS specialist or something like that, but the language of JavaScript has absolutely exploded, it’s showing no signs of slowing down.
It makes you useful on front end and back and in all spectrums of the front ends, that’s just the way it is. It’s JavaScript for sure. Not that I and as a long-time person who even resisted JavaScript in the early days and whatever, I’m not trying to devalue anybody else’s skill here but if you’re saying what language matters right now, that’s the one.
What is your favorite IDE or text editor?
Chris Coyier: I think I’m on VS code with most of the rest the world. Although I say that, I will almost kind of Cochlear or something, but just in the last week I’ve heard from somebody that was using TextMate, I’ve heard from people who are still on. I shouldn’t say still on, that’s the wrong attitude to have you can use whatever tool you want dang it, but I definitely, one developer’s still on, I said it again but on Sublime Text and Adam and stuff.
There are lots of editors out there but I’m on VS code, and I have seen a massive movement towards VS code, it’s a very powerful editor that people are having a lot of success with and I see a lot of value in it so. It’s big, but it tends to change though doesn’t it? Every year or two there seems to be a big movement towards something new.
What resources do you use to stay up to date on web dev?
Chris Castig: Yeah it looks like that’s the way things are going, and it’s super interesting to watch. What about resources that you use or that you would recommend, obviously other than ones we’ve mentioned that you’ve been working on over the years? But what other resources do you learn to keep up-to-date? Maybe newsletters or podcasts or blogs, how do you keep up-to-date?
Chris Coyier: Yeah, that’s a good one. I probably get more newsletters than I know what to do with. If there’s anything related to web development at all and I run across it, and I feel like I haven’t subscribed yet, I accept I’m a little bit of a junkie that way so. But one of the ways that I do it is to use a, I still use an RSS reader.
I like one called Feedbin, there are so many different ones out there but I think that even if I hadn’t been subscribing to feeds for years I’d still do it now from scratch. Because it’s such a nice way to know you’re on some somebody’s site and they wrote a good blog post, and they clearly have an RSS feed.
I’ll just slap it in there if I haven’t already which means that now instead of going to all these different developers’ blog sites to catch up with them when they publish a new article, it just flows into my Feedbin. Feedbin is just this reading experience, and I probably pop in there once, twice, three times a day, and I’m always behind I don’t have any pressure to keep up with it.
Which is to some sense why I like it, it’s not like email where I feel like it’s my responsibility to get through it all. This is like, they’re just articles, if I don’t read them all, so be it. So there’s less pressure in there, but it gives you this email address that you can sign up for newsletters. Which is kind of nice, so they’re not necessarily in your inbox ’cause newsletters largely are just an article with a bunch of links in it, so I tend to use Feedbin to subscribe to my newsletters.
Chris Castig: That’s cool, it’s surprising I feel like, some people don’t know what RSS is even. I feel like in my teaching I have a lot of faces that, I teach at Columbia as well. Sometimes I’ll say “RSS” and people, I can see in the crowd, they’re not getting it.
But it’s interesting it’s definitely a fantastic technology and Feedbin is a really cool way to do that so I think if somebody is interested, you can look for the RSS on the site or probably just try to go to /feed or /RSS on the domain and maybe that’ll work.
Chris Coyier: Yeah, that’s tricky too. Does the site even have an RSS feed? What if it does, what do I even do with it? I get it, the technology is not great, the UX around the whole thing totally bad, but I guess you’d only seek all this stuff out if you were like, I don’t know, do you wish you read more about this stuff?
Do you wish you were more immersed in it? Do you wish you didn’t miss posts by some of your favorite developers or whatever? If you feel like it’s too hard to keep up with these things then maybe give it a shot.
Learn More
You can learn more about Chris Coyier at CSS Tricks or listen to the ShopTalkShow Podcast.
If you’re a beginner who wants to learn to code? Or become a front-end web developer? You’re going to want to learn JavaScript. As Chris said in the episode, “The language of JavaScript has absolutely exploded, it’s showing no signs of slowing down.”
Before you learn JavaScript you need to know HTML & CSS. So my advice would be to first Learn HTML and the Learn JavaScript. One Month has a great track for learning both of those — and you can do each in less than 30 days.
