Interview with Chris Coyier

Hey guys, welcome to episode 10 of Inspect. My guest today is a household name in the world of CSS. He's a founder and writer at CSS Tricks, founder and designer at CodePen, and co-host of ShopTalk, podcast about design and development. It's my pleasure to welcome to the show, Chris Koehr.

Hey! Welcome to the show, Chris. Thanks for having me. No problem, thank you for being here.

Yeah, this is great. We learned about time zones again, classic, classic thing. I even one time had to build a little app just for my coworkers at work just to be like, okay, how does this work again? Because we have someone in Australia now, Rachel Smith at CodePen, I had to like design a draggable little app just to wrap my mind around who's where and when.

Yeah, that's because all of CodePen is the whole team is remote, aren't they? Yeah, we are. There's very remote near each other at the moment. Yeah, cool.

I mean, what obviously we'll get them to CodePen in a little while and all the other things you do. But for those that small corner of the internet who doesn't actually know who Chris Koehr is, do you want to just give a quick rundown of who you are, what you're you doing, where you're from? Yeah, sure. I'd be glad to.

So yeah. Hi everybody, I'm Chris. I do all kinds of stuff about the web. And it's not that I struggle.

I have a perfectly good time explaining to other people in the industry what I do and stuff. But sometimes I just got my haircut yesterday and they're like, what do you do? You're new here. I'm like, I do build websites, I guess, which generally people understand.

But then I'm like, well, I don't. Because right away they get the idea that you're a freelancer. They're like, oh really? We're looking around to get the website redone here.

I'm like, I could maybe suggest somebody, but I'm not just me. There's plenty of freelancers in this world. I'm just not one of them. I work on websites, but I don't do freelance.

And then they're like, well, what do you work somewhere? They're like, not really. So what I usually end up telling people is that I help other people learn about the web, which I think is true to some degree. I have a blog called CSS Tricks.

It's CSS dash tricks.com's going on 10 years old. It'll be 10 years old in July, 4th of July actually. Which is really cool. And what it is is, I guess primarily it's a blog.

It's a lot of different things. I mean, we have a video screencast that we publish once in a while. There's forums on there, people talking to each other and asking questions. There's nothing called Almanac, which is not blog-like, but structured content around what are all the properties in CSS and article explaining those.

But I guess the heart and soul you'd say of CSS Tricks is the blog, where we pretty much publish something every day, if not multiple things, that range from tutorials to interviews to links and commentary about other things to just thoughts and stuff. There's a blog to format can be anything. So that's a big deal. And the point of it is read CSS Tricks, and you're staying up with the industry, and you're learning new stuff about the web.

So there's not just a blog. It's basically a go-to resource for everything modern in the web development world as well. Most of the articles are probably the first place that people here when they're learning about, something like Flexbox and CSS Grid. And just some of the CSS properties that people tend to fix.

It does end up being referential like that. You're right. It ends up being you Google it and land there to find some kind of resource. And I love that, too.

In fact, I was just looking at our analytics, and it was 87% or maybe 84%. And some mid-80s number of is the traffic that we get from Search Engines. And the bulk of that from Google, of course. So traffic-wise is healthy on CSS Tricks, and a lot of it comes right from Search.

But there's that aspect of it. And I just read it like a magazine. I subscribe over RSS or I subscribe to the email thing, because I just want to read what's new there. So there's two aspects of it.

There's that referential content. There's the iLand here, because I'm Googling something. And just our general readership. Yeah.

And I think I'm in the second camp where I subscribe to the RSS feed and follow on social media on Twitter and stuff. So I get to see all the regular updates. But then it is always a landing point when I do need a little bit of help on something that I've forgotten, or something that's not just front and line all the time. Yeah, so what was the driving force in setting up the block in the first place?

Well, the blog itself was kind of the whole story, actually. Yeah. Well, it started as a blog, for sure, because it was 10 years ago. It always has been a WordPress site.

I was kind of learning about WordPress even at the time. And it was kind of like a body of mine where like spinning up WordPress sites with kind of a pipe dream of filling them with content and putting Google AdSense on them, essentially, to try to get some beer money kind of thing. And we did that for a while. And it wasn't, anyway, it's kind of a long, not that interesting story.

The only one that I enjoyed writing for was CSS Strix. I was just like, this is fun. I like writing about web stuff. I like doing web stuff.

This is, you know, I hopefully I can make a career out of this, but it's fun anyway. So it really clicked with me this, like, you know, working on websites stuff. Of these other blogs that you set up by any of those still running, go to date. Nah, long gone.

In fact, they were Adobe related. They were like, they were like, help websites for different Adobe software. OK, it's just fun. And that, you know, it wasn't a, my heart wasn't in it necessarily.

I wasn't like, I can't wait to diagnose somebody's, you know, installation of InDesign, Trouble, or whatever. And then, you know, they shut down, I'd say, mostly because of lack of interest from us. And then, secondarily, the nail in the coffin was that Adobe didn't like the name of their software was in the URL. So if you want to buy a URL today, you can't buy Adobe Illustrator socks.com or something like that, because it has their name in the copy right?

Yeah, it's in us. Anyway, that was like ancient history. You know, but that was the early days of CSS Strix. And, you know, it was a very different site than I was just like, here's some cool little trick I learned about CSS or whatever.

It's such a dorky name, you know? Like, it's very, you know, if I could go back in time, I probably would change it. But at this point, I won't because it's just... No, it's your brand name now, right?

And it's not just about CSS. That's the... No, it's just about CSS. That's the...

No, it's just about CSS. It's got a lot of JavaScript, HTML and everything else around the web. But the name is CSS Strix. But, yeah, you've got to the point now where you just don't need to change it.

It's a household name now, is it? It's a brand. Yeah, and I'm okay with that. Yeah.

So it's coming on to 10 years, you said, do you have any sort of plans to celebrate the 10 years? Or have you got anything... Well, I have a little meeting about it today, actually. I think so.

We'll do something. I always publish something on the 4th of July. There's been a birthday post on every... And I usually use it to kind of a state of the union, what's going on, what we're thinking, milestones, we've crossed that kind of thing.

And then at the end of the year, usually I do a statistical post of how do we do by the numbers. But usually July 4th is kind of a... I don't know. More checking in with Chris kind of thing.

So I'll do that for sure. And mark the occasion in a bigger way because it's 10 years. But we're also thinking, maybe we should do something more. So I actually am not entirely sure exactly what we're going to do.

It's about a month away still. And we have some ideas and of course bigger things we're working on. So we might just kick it into high gear and hopefully get one of those bigger things done and say that the anniversary inspired it. Yeah, sure, sure.

I wish I could announce it here. I just don't know what it's going to be yet. But it will be... We'll celebrate somehow.

Yeah, exactly. So when you start the blog, this was going back in 2007. Was this your full time gig then at the time? Or were you working elsewhere?

Or how would you use a job in your time when you... Oh, yeah. In the very early days it was very much a... Just a side project thing.

But I was at an agency. It was my very first web job. I locked myself into... I was actively looking for one because I knew that I wanted to work on websites and how much fun.

And I was having fun building websites on my own, obviously. And CSS tricks being one of them. But I was on a website and spinning up a joke site or something or in my band site. And any excuse I had to play with a website, I would do it.

So I get this job and my income was having an agency job essentially. And it remained a side project for at least five years. Yeah. Okay.

And then you reached a tipping point where you realized that you can make this full time. Yeah. Exactly. I was just like, yeah.

And even then that didn't last that long because at the very time that I decided to go totally solo and not have a steady income normal 401k kind of job, I then started code then. So it was... Okay. Okay.

Okay. So... That became the job as well. Cool.

Just before we get on code then. So CSS tricks now is that a... It's not a solo venture. I think it is.

You've got some stuff working on there. Yeah. It's fluctuated a little bit. There's no other full time staff.

There's just staff writers of which there's Sarah Dresner and Jeff Graham and Robin Rendell and Miriam Suzanne who, you know, they just, we consider them staff because they write regularly, you know, and we like share a slack and talk to each other and stuff. But then there's just tons of guest authors. So we like say publicly, we accept guest authors and have a page that explains on how that goes down and we pay for it and we help you edit and all that stuff. So they're not employees, but certainly they're, you know, benefactors of CS tricks or whatever.

So yeah, and then through time there's been, you know, administrative help and there's advertising help and, you know, planning help and stuff like that. But I'm really the only full timer. It's the US districts and it's weird to even call me full time because I split my time between my other projects. So it's just part time for everybody.

Yeah. Okay. It's quite a big project for a part time project. Kinda.

Yeah. I mean, but in the end it's, you know, it's a WordPress site. It's one server. It's hosted.

It's just, you know, it's not particularly difficult thing to keep online, you know. So a lot of days you just wake up and you publish some words and then I don't think about it for the rest of the day and do other work and then do a little planning at night. Maybe like, Oh, what are we going to do tomorrow? We'll publish this.

Okay. It could be, it would be neat. It would be a different world if I spent eight hours a day on CSS tricks. You know, it could be a even cooler, more in depth, more feature rich, more content heavy.

I don't know. I suppose the rate that things change doesn't really warrant having content, you know, we pushed out maybe even several times a week. There's, it's a fast moving industry, but it's not that fast. It probably needs, you know, a full time effort.

I guess, right? I think what it would need is it could be done. I mean, I could see a world in which I do that, but then it would also require, I think, a business strategy that's a little more robust than what we got. Like, if I was going to be like, all right, I'm going to go definitely hardcore full time on this thing all day, every day.

I want to hire somebody else that was like almost like a, you know, see what he called the accounting version of a CEO or whatever. Yeah. It's hard for what it is, but somebody who's like active, more like a sales person really, who's out there selling sponsorships and like making sure the thing is, is making money so that it warrants a full time thing. Okay.

So, so instead of your focusing mostly with attention on your other projects and, which is, you biggest one, I guess, is CodePen. Yeah, which is, you know, it's quite a bit bigger than, you know, CodePen has a full time staff of seven now, and, you know, seven good developers. So it's like kind of an apples and oranges at this point almost, thankfully. Yeah, no, it's brilliant.

So in my research, I found that CodePen was started in 2012. Is that right? So it's been made for about five years. Yeah, like the super early version, the very first version was 2012.

Yeah, I don't think I caught it at 2012. Probably a little bit later than that, but I've been using it for a couple of years now. But again, you know, could you put it in your own words to explain exactly what CodePen is? Because as a user, it's quite obvious what it is.

Well, I hope so, but it isn't absolutely to everybody. You know, I would think to you, another front-end developer, you're like, yeah, I get it. I see sites like this. It's not the only one.

I don't know. So I think to some people, you and me, we're like, yeah, I get it. I have an account there and I go log in and I make little things. You know, a pen, as we call it, on CodePen is like a little tiny website, in a sense.

It's HTML, CSS, and JavaScript. And you can write it right there on CodePen in your browser. So it's a code editor in the browser. And you're seeing all four of these things happen at once.

You're writing HTML in one panel, CSS in another panel, JavaScript in another panel. And the fourth panel is the preview of what you've built. And it's updating itself in real time. And the reason why that's cool is because it's just so satisfying to, you know, change one little value and see it change visually.

It's just like a little tiny development environment that's just really easy and quick to use. And so we keep packing features into that. You know, like, oh, you want to write in SAS? No problem.

Just turn it on. You want to write in Babel? No problem. Turn it on.

These are the difficult parts of development, not difficult parts, but the laborious time consuming parts. It's setting up your environment. Sometimes you just want to do a quick mock up to prove a concept and you don't want to have to run up, open up your terminal and just all of the dependencies. Make a folder and Pm install everything and stuff.

You know, there's reason to do that as well, of course. So, you know, CodePen is that it allows you to get on on something small and stuff. And it doesn't even have to be small. I mean, people make sprawling amazing big, huge things on it.

So it starts there. And that's the way that you can think about it at first. But it really people do use it in tons of different ways. They use it to make a test case to share with somebody like, oh, here, I'm having a problem with this.

Take a look at it. I think that's the links to it in Stack Overflow or whatever, things like that. People use it to kind of just show off, you know, like, wow, look at this. You know, I made this amazing thing.

And they would do that because they have a profile and code pen and it becomes part of their profile and then their code pen profile becomes a little bit like a personal site to them. Almost like a resume or a portfolio of your work. And there's kind of some social reason to do it. It's a bit of a social network in that I can follow you.

You can follow me. We can people heart things on CodePen and they can leave comments on things. And we track views and other metadata on it so that we can sort things by popularity and fuel our search and stuff. So it's a social network as well.

So it has this whole code editor component where you're building stuff. It has a kind of a front-end developer community aspect to it. And it has like an inspiration aspect to it too because there's so many users and so many pens that have been created that you can search around and kind of get lost browsing around CodePen with just loads of content there that we intentionally try to make findable and explorable. Yeah.

And like you said, you can just get lost because some of the stuff that people are producing on there is just amazing. And you forget that this is just done with those three core front-end technologies, you know, HTML, CSS, and JavaScript or there's some external libraries maybe added in. But essentially those three elements and people have created some ridiculously complex and amazing-looking demos. All right.

And it's all open source too, which is good to now. So if you find something that you like in CodePen, it's MIT-licensed. If it's a public pen, you know, that's been shared with you. So go ahead and use it and fork it and play with it yourself and, you know, that.

I should say though that a big change for us in the very recent past on CodePen is we tried to grow up a little beyond that even in that. So I explained to you how there's CSS panel, the HTML panel, the JavaScript panel. What happens if you want to, you know, you need three CSS files because you're used to working in SAS with partials or let's say you want to have five JavaScript files because you have an entry point for your webpack thing, but you have four modules that go with it. Let's say you have a five page site, so you need five HTML files.

That stuff is kind of possible in the pen editor, but it's really not designed for that. That's more like you're used to working on your local machine, you know, spinning. Go on your terminal and creating a folder and, you know, npm install and that whole world. We wanted to get into that too because we want to, you know, that's what some developers expect and we want you to build something even bigger and more robust and that type of thing.

So CodePen now has CodePen projects as well. So you can make a new pen, which is the old thing that we described. You can make a new project. That's the new thing that I just described.

So you can kind of do both of those things. And, you know, and projects is kind of cool. You can deploy it as well and you can map a custom domain to it. So you can, it's really kind of a website builder too, if you're into that kind of thing.

Yeah, so projects was launched. Was it the Payland of last year? I think it's even newer than that. It's really only three, four months old.

Oh, is it this year? Okay. So how long have you been working on the projects element of CodePen? Because I imagine that's quite a big project.

It was indeed. And it wasn't the story of it really is that we, at one point, we're trying to decide as a company, do we go on our own here and just slow growth and chip away at it and maybe we'll make enough money one day to hire somebody and then maybe we'll keep growing and hire somebody else. That's, you know, we're kind of in between that and full on investment, you know. So we did take investment and now it's been, I don't know, a year and a third ago or so, on purpose and it was from Friends of R.

So it wasn't like a, you know, it's not like we've went around Silicon Valley knocking on doors and making pitch decks for people and stuff. But there, you know, there's smart guys who believed in us and who are our friends and previous bosses at the last startup we were at. So they gave us a million bucks at CodePen to, you know, to grow a bit. And we took it on purpose because we were like, we had this idea for projects because people asked for it, you know, they're like, I need multiple files.

This other app gives me multiple files, whatever. We called it multiple files as an internal name on CodePen forever. Yeah, that's not good. No, it's not, but it's kind of described what people wanted.

They want multiple files. Yeah, not a good name, though. So we said, okay, we need, if we're going to do this for real, we can't, it's too hard for the three of us to do me and Tim and Alex only because we're part of our job requires doing support and like making sure the app stays up and we are on top of normal growth and stuff. It's like we don't have all day every day to dig into a new feature because there's just so much work that's just day to day necessary work that needs to happen.

We need more bodies, we need more developers. And we knew just who we wanted. So we got the round of funding and then reached out to the people we wanted right after that. And they all said yes and away we go.

So we got some really smart developers and Marie who's had a support, which she's had a community and she's had a host of the podcast and she does all kinds of stuff for us. So we have Marie, Moseley, Tim, Holman, Rachel, Smith and Jelba who are the four people we hired after funding and then got into it right away. As soon as we hired, got them all on board. We're like, here's what we're doing.

We're building projects and we didn't think it was going to take quite this long. They took about a year to get it, start to finish and now it's out and it's been good. Brilliant. I've had a little play about with it.

And it was one of those features which you don't realize how great it is once you start using it because people are used to working in that way. Like you said, having more profiles and just splitting your code across making it modular. And that was one thing that was always nice. Even simple stuff like images, you need an image, drag and drop an image on there.

It uploads into your little file system and then you reference it relatively like you're used to doing anything. It's a much more humongous feature development wise than pens. But there's not as much to explore with projects because we intentionally made it a pretty pro lockdown feature. And just because we have to, because we're a small business and we're trying to be a business that sticks around for a very long time.

It's a free user gets one project for example, whereas if a user gets unlimited pens, that's kind of a big difference. Yeah. Yeah. Okay.

You mentioned earlier about Tim and Alex. So if you're one of the founders, there's three of you. The other two, Alex, Chris and Tim, Sabot. Just a little bit about who they own, how you hooked up with them and what they background as well and their involvement in the project.

They're both just friends of mine. We met in Florida. We met because I left my agency job at a point to go work for a company called Wufu, which is like a form builder, but still around, still jugging and doing well. It wasn't exactly early days of Wufu when I got on.

I think they were maybe five years into. I can't remember maybe a little longer than that. It was like a Y Combinator startup, one of the first classes of Y Combinator. And they did well and eventually felt like getting out of the game and sold Wufu to Survey Monkey.

So I was there at that time as were the original three co-founders of Wufu and Tim and Alex and some support staff as well. So we all were there during that. And we're just friends. We were just living in Florida, working on a startup, having fun and became friends.

And then we went to Survey Monkey and we all worked there together as well. So now we've moved across the country together. We've worked at two different jobs together and became even better friends. So at that time, I was at Survey Monkey for about a year, which is a great place, you know, but I was just ready to do my own thing.

I left to do my own thing and they stuck around another year, but we're also kind of thinking like, why don't we all work together again? You know, why don't we do our own thing? Why don't we take a stab at true entrepreneurship? And so that's kind of like the early days of CodePen.

But all these stories are intertwined, you know, because it was Y CodePen, you know, well, that structure of building things with just little panels of HTML, CSS and JavaScript is a fantastic way to show off front and demos, which is what CSS Strix is all about. So the early days of CodePen was let's build this for CSS Strix essentially. No, it's a good idea. Because you do have a lot of code examples on new CSS Strix articles.

So you want to make those interactive and show exactly how they built. So are there any plans to grow the team any further with CodePen? Well, absolutely. I mean, I'd grow to, I mean, it depends on day to day and this decision is not mine alone.

So I'd be just spitballing, but I'd say in my heart of heart, I'd love to, I'd love to double in a couple of years, you know, just because I know that I could put more people to work. We have enough ideas. We have enough places to go. I like managing.

I want to do more managing if I can. Yeah, there's so many smart developers out there. I think I can put my skills in perspective and just kind of knowledge of the industry and stuff to work just as well or better than if I'm sitting there writing code eight hours a day. I think I could be useful in that role.

I think I want to have the opportunity to do that, but I can't just turn around and hire four more people because you can't afford it. So we need to continue growing and hopefully be making choices that are getting us growing faster and then maybe as a company, we'll decide to hire more people. I hope we do, but whatever way it goes is okay. I just like working on CodePen.

Even if we never hired anybody else, I'd be happy with that too. So you just need more people to buy subscriptions so they can make more people? Every listener of Inspect, you better upgrade. Yeah.

Before we get on to that, you've got a little treat and so forth, listeners. Do you want to explain what's going on here? Yeah, sure. I mean, we talked about it a little bit.

Why not? I'm on a podcast. We're talking about CodePen. You have so graciously allowed me to sit here and blab on about my paid product.

Sometimes I try not to be promotional, but at the same time I'm like, well, it's kind of my job to be in a little bit, in a sense. So anyway, CodePen Pro is unlocks a bunch of features of CodePen that you don't get on a free plan. And there's all kinds of stuff. Not only the projects that we talked about, whereas if you're pro, you get a whole bunch of them and you get to upload more files and bigger files and all that stuff, which is a pretty compelling thing for pro if you ask me.

But in the pen editor, you can upload assets there and we have LiveView, which is this cool feature. As you type, it's changing the preview URL that you can test anywhere on your phone or your iPad or whatever. That's just one and there's like 10 other features that you get for pro. So let's give some away on this show.

I guess it's your podcast. So you can figure out how you want to pick the winners. Sometimes it's fun to just do something on CodePen itself, but any old way you want to dream up, let's give away to free developer plan to whoever's listening. I'd be happy to do that.

Okay, so this is the competition segment of the podcast. So what we were thinking is, for all the listeners out there, if you want to win a pro subscription, what is it? A yearly subscription or is it a monthly how to work? No, well, it's a year for sure.

I mean, you can sign up either way, but a year of developer pro, which is the primary pro plan. Okay, brilliant. So a year of developer pro and we're giving away two of these and the way you can win one is go on to CodePen and create a pen, whatever you can think of, but it needs to be somehow related to podcasting. So whatever you want to do, whatever you decide to do, make it somehow related to podcasting and you just need to tag your pen with the word inspect podcast.

And I will do a search for that tag and I will have a look at them, Chris will have a look at them and we'll pick to the favorites and those people will be doing this. And that's exactly what we'll do. Simple as that. If you haven't got an account on CodePen already, go and create a free account, create a pen, build something cool which is related to podcasting somehow, whatever that means to you, tag it with inspect podcast and we'll check those in about a couple of weeks, I think two weeks, maybe three weeks or even a month.

How long should we leave this? Maybe until the end of this month, end of June. Fantastic. Yeah, we'll pick a winner by the end of June and get in touch by a CodePen or whichever social network we can find.

But yeah, I'll put some instructions in the show notes for this episode. So if none of that made sense, go into the show notes, have a read and hopefully it'll make sense to do that. Brilliant. Thanks for offering that.

So this brings us on to your third project, which is probably, is this your most recent now? You also do, you're also a host of a podcast called ShopTalk. Yeah, I can't remember. I mean, they're both, they both happen about the same time.

Apparently, CodePen and ShopTalk doesn't really feel that way, but I also don't know which it feels like came first. So yeah, I also have a podcast, much like this one. We talk about websites. I have a friend Dave Rupert we talk about with.

We have been going for five years now, you know, probably at, I think this year we hit 300 episodes, which is wild and yeah, we have that. And that's so simple in a way. It's a part of the trifecta projects I work on for sure. And I love it and I'm proud of it.

But of all things, that definitely takes the kind of the least amount of time. Yeah. And I was listening to one of your shows recently. You did an episode called on podcasting, but yeah, just a couple of weeks actually.

And yeah, that was actually a really good episode and gave me some hints and tips and what to do. More about some equipment to use and right. You're focused. Yeah, you're focused.

Yeah. Because one of the things you mentioned, I think it was in that episode is how you try to change the format from like the Q&A and interview style formats. And so it could just sort of explain what the format of your show is if there is a specific one. Yeah.

Well, in the early days, it definitely we tried to play it up a lot more, which was, you know, we may or may not have a guest, but regardless, we're going to take questions from people. We even tried to build like an actual live call in thing, but we just ended up getting nervous about that, you know, like use like a Twilio API and have people connect in and stuff. That ended up being more complicated than we bargained for. And we were a little worried that because in the early days, we actually did the show live as well.

We like wired up how it worked and people could hit a URL and like literally listen to the show live and chat along with us. It's only been in the last, I don't know, 20 shows or something. We've stopped that only because it took work, you know, and it was a little harder to pull off. And I'd say about 1% or less of the people who actually listened to the show actually like care to listen along live, you know, it's kind of a rare thing in podcasting.

But it fit the spirit in the early days because the idea was a call in show modeled after kind of like car talking NPR here in the States. I don't know if they if they are that internationally or not, but the idea is a very popular show on NPR here, which was, you know, two fellas, just people would call in and be like, you know, how do you fix the brake calipers on a 1989 Subaru outback? You know, I got a rust spot over my left door. What do I put on it?

You know, that type of stuff and they were very knowledgeable about cars and and help people out with their problems and we're like, that would be so fun to have like a tech call in show. There was even like a show called tech TV and they had a have a had a call in segment on what was that called the screensavers or something that's okay. I have I have goodness and all Jeff for for call in tech shows and call in shows in general. It's really fun.

It's really all Dave's idea. So instead of doing it, you know, we did it live and instead of having people call in a lot of times they just send in an MP3 or send in a written question and Dave and I would read it and then just answer it, you know, the best that we can. And unfortunately we're terrible at it. You know, we just a lot of times we end up with a really wishy washy.

It depends kind of answer, but you know, that's just that's what the show has become. And that's a lot of times what the web is, you know, it's very hard to answer people's questions definitively when you just don't know their situation, you know, what their workplace is like, you don't know what their full tech stack is like, you don't know how much control they have over it or what power they have at work and stuff. So yeah, we try to factor that kind of stuff in and just answer their questions. Yeah, I quite like the format of the show because it's not always, you show doesn't necessarily focus on just one topic.

So you can sort of listen to the show and you'll pick up several bits of information which, you know, may not come in use at that very moment, but they kind of sink into your brain and become just part of that, you know, that knowledge bank that you've got in your head. And yeah, it's just it's just helpful, isn't it? It's just small nuggets of information. So how do you how do you split your time between those three projects?

What's the typical week look like? Yeah, it's just, you know, as you can imagine, there's a bunch of email and just stuff, you know, whatever, you know, try to prioritize code pen work and making sure that everybody knows what's going on and that that's a happy and healthy place. And then and then whatever else. A lot of times I'll wake up and just get right to CSS tricks and just publish something and I'm like, okay, that's done.

Now let's look at the old to do list for code pen and do that type of work, which could be, you know, we're designing a feature or looking at open tickets and trying to fix them and stuff. Some days when I feel like, you know, like, I'm going to get into the code base. I just feel like getting into the code. I'll have at least one of those days a week where I just spend many hours and hours and hours and hours just, you know, looking at our code and refactoring something and stuff.

But maybe it is only one day a week though, you know, and the rest of the days are like, I need to do some business stuff with some people. I need to get back to these people in this idea of this event that we're planning and that type of stuff. So there's plenty of just like business work to do. Okay.

Keep yourself busy. Yeah. Yeah. And I don't mind email, you know, like we're on Slack all day, of course, and all the other projects.

And that's just chat really. But I still do a ton of email work and don't mind that. Yeah. I don't think it's ever really going to go away.

Yeah, probably not. No. Just going back to the podcasting thing. You know, obviously I'm fairly new to podcasting.

This is episode 10. So I already started back in March and I'm still playing around with the format. You know, I've had a few sort of solo episodes, a few guest speakers and a couple of interviews as well, interview style. Do you have any sort of advice for anyone who wants to get into podcasting and see someone like me who's starting out, you know, with your five years of experience, how to sort of just keep going and get so motivated and, you know, so grow the project?

Yeah. I mean, hopefully it's hopefully it's fun to some degree or you have some ideas to make it more fun. Yeah. I mean, guests are great just because that's such an excuse for you.

I mean, in a sense, I mean, it's kind of like your ability to get people that might not agree to just call you on that. Like, just to be perfectly honest, like I love this. I'm happy to chat with you. This is great.

But if you wrote me an email that instead said didn't say, hey, do you want to be on my show, inspected, just said like, hey, do you want to just talk on the phone with me for an hour? I would have to admit, I probably would have said no, you know, like it's not that I go on, I don't like you, but I can't just have our phone calls with people for no reason, you know, but you can because you have a podcast and there's like some potential publicity and marketing involved with all that. And that's awesome. You know, you can turn this into a little tiny business.

So hopefully if it's paying for itself and you're having good conversations and you're growing with it and loving that part of it and it fuels your work because you're talking to people about work stuff, I mean, there's all kinds of advantages to keeping going with this. So as long as you're having fun with it and it's not costing you anything significantly and say you won't have a problem keeping you going. Yeah. I mean, I've kept my setup quite light at the moment.

Like you mentioned in your podcast, you had equipment for different budgets. I would say on the lower end of the budget at the moment, I've started off small. See how it goes, you know, got myself a USB mic, it's a blue Yeti. Yeah, that's a good one.

Yeah, it's a good mic and yeah, I'm just recording in, oh, I'm using Logic to record. Well, that's above what I got. Yeah, no, it's just because I used to make music back in the day and so I already had a copy of Logic already. You know what buttons to click?

Yeah, I already got a bit familiarality with it. So I quite like Logic. It allows me to record, you know, the two-way conversation as well. But yeah, at the moment, yeah, I really enjoyed it and hopefully it'll just come around right and look forward to get some more guests on as well.

So yeah, anyone who's going to show, give me a shout. Yeah, do it. Grow. Yeah, good stuff.

I like the idea of podcasting, you know, I think it's going to hang on if I had to guess. Yeah, you know, I was, I don't know if I was late to the game in terms of getting into podcasting. I got into it into listening to podcast probably about a year ago. It was a show called Developer T by Jonathan Control.

And that was pretty much the first one I subscribed to. Cool. Yeah, you never know what people are going to pick in that. That was yours.

And since then, you know, I've subscribed to quite a few now and it's just become one of those things that I kind of stop listening to music on my commute now and I listen to because all day, every day, pretty much now, just from, you know, variety of topics, not just web development or technology ones, you know, the stuff about business. Yeah. It comes and goes and waves for people to, and I think that's okay. You know, they'll be like, oh, you know, I listen to 10 episodes in a row or I just had a super long road trip and I've been just watched a whole bunch of them.

Yeah. That's my experience as somebody's podcasted for five years. Somebody'll tell you like, you know, they used to listen, but they don't anymore and then you see them again and they've been listening recently. People just, they come and they go and that's okay.

I'll listen to a bass that, you know, is fairly solid, but it's probably not the same exact people that are there three months later. Yeah, exactly. Yeah. It's good for advertising.

Yeah. Oh, yeah. I need to try and get some advertising on that. I need to think about that one.

I might speak to your phone. Sure. I have no, I have no magic really, but it's like, I think you got a hustle a little bit. I don't think sitting back is going to do anything.

I would probably suggest putting together some numbers, putting together like maybe even like a PDF or something or some kind of page of your site that really like sells what you got. You know, this is what you get. This is the value of it. It's a sample of it.

And I did for somebody else. And this is how effective it can be. And here's an article you should read about the future of how, you know, like somebody excited about it and then maybe they'll bite, you know. Yeah, definitely.

All right. Well, that's what I'm going to do now. You've just given me some work to do. Thanks.

Yeah, it's work and for sure. Yeah. Yeah. So what's next for Chris Quinn?

Are you for CSS tricks? You've got code pan, you've got shop talk show, you know, keeping yourself pretty busy already. Yeah. There's definitely nothing work wise that's happening.

This year is crazy for me. I got, I got one move I've already done. I got a move again. I'm just thinking I'm just have tons of life events happening to me this year.

So I am just in and I on purpose like last year was like next year I'm going to speak a lot. So now I'm living through this like I booked a bunch of speaking gigs this year. And so I'm living through that as well. It's just going to be like the busiest year of my life.

So I'm like, I am definitely not like rolling out any like super major features of anything. I'm just like living life, publishing, podcasting, running code pen, and just that's it. Yeah. Just that's it.

Yeah. Like that's just more things. Yeah. No, it's not nothing I realized.

Where are you speaking next? I leave next week Wednesday to head to Amsterdam for CSS day, which I've never been to before. I've never got to spend much time in Amsterdam at all. I'm very excited to be there.

And I get to give a talk that I'm preparing. So tomorrow morning on Saturday, unfortunately I'm going to spend my Saturday polishing up the talk because it's a brand new one and it's about it's kind of about CSS shapes, but like just loosely that concept, not like the actual CSS shapes back. It's mostly about like, I don't know, all the different ways that you can use shapes and web design. Like there's actually like functions as part of CSS.

Like there's a circle function. Yeah. So what does it take? Why do you use it?

That kind of thing. And then only because it turns out there's like all kinds of quirks with it and stuff. So just been digging into that. That's kind of the point of CSS day is that you deep dive into something particularly nerdy and CSS.

I've never been there, but that seems like the vibe of it. You know, it's like, I can do that. Okay. And what is a website?

This is it's not NL. I guess for the Netherlands, right? CSS day dot NL. Oh, yeah.

Okay. CSS day not NL. So that's on the 15th and 16th of June. Yeah.

Yeah. Cool. So who else is presenting there alongside Rachel Andrew? Uh huh.

I see Rachel at all kinds of stuff because we speak. She speaks at all the event depart, which is another series that I do. So yeah, Rachel's amazing. Just just the master of the CSS grid stuff, which I'm so happy has paid off for us as developers and the web in general.

It's going to be amazing. And nicely has paid off for Rachel because she's just been hammering the CSS grid stuff for for so many years. And everybody's like barely paying attention because they're like, Oh, it's behind a flag boring, you know, and now that it's out, people are like, what? She's like, I got you covered.

Yeah. I mean, I've read that. Well, I briefly met her just a couple of weeks ago. She did a talk at a event called breaking borders, which happened just around the corner from me.

So it's quite small event. It was only maybe about 50 odd people there. But yeah, she just went over. Obviously what see this grid is and now that it's unleashed into all the browsers and how it's really picking up traction.

Yeah. I've been reading about it, learning about it for quite a while to the point where it's like, I don't know, it's starting to be a little more comfortable to just reach for and starting to be part of my brain process, but not entirely yet. There's a lot to know about it. Actually, it's not just one property.

It's a bunch of properties and it's a bunch of sub functions and stuff. It's actually quite a bit to know. So there's that. And then there's like, then you know, I'm glad she just kind of beats the drum on what you can do because then you'll show just a very basic simple thing to something that will be like, what?

You can do that. The knowledge sharing for CSS Grid is just starting. Yeah. People do not get it yet.

Yeah, exactly. And who was I talking to? I was talking to Wes was last week, I think about it as well. And we were saying how when CSS evolves over the years, generally you get one or two extra properties that when we went from the CSS to spec to CSS3, there was a few things added, but they weren't very closely related.

So you had like some effects and you had a lot of border radius and things like that. But then when Flexbox and CSS Grid came out, you had all of a sudden you had these big chunks of CSS properties that all related that you had to learn for them all to work. And it was just one of those things that was really hard to get it all into your head. It was like, what do you do?

You go on Google and you try and learn how to use these two things Flexbox and Grid and where do you end up? And CSS is the first article. And your article on both of those is like, it's like, old us really is probably one of my sort of most frequently visited articles on your site is Flexbox and the Grid one. Yeah, that one's, yeah, they both end pretty good.

Yeah, but it's going to take a little while for it to become second nature in my mind, I think, because there's quite a lot of new properties were added. There's a lot of different ways, especially of using the Grid, which didn't really come naturally. Yeah, it really is a big deal though. So I mean, if anybody's like, which should I learn about front end development?

I mean, I'll tell you what to learn, Grid, get on it. Definitely, definitely. And you've also written a book about SVG's practical SVG. Yeah, I came out about, I don't quite think so, but soon I think, I forget when I launched exactly.

It's actually more and more happy about it because of the fact that SVG hasn't changed like at all since I've written it. So many people like write tech stuff and then they're like, oh, it went out of date so quickly, you know, like if you wrote a book about Angular one or something, you'd be screwed, you know? But I wrote this SVG book and like nothing has changed since the day I wrote it. I almost should use that as a big new marketing push for it or something.

So it's just as useful as the day I published it practically, which it's just another one of those technologies that's just way under known about, you know, or even if people are like, oh yeah, I know about that SVG stuff. I'll tell you what you don't do, reach for it when you should. Yeah, because even if you know what it is, people aren't using it or they should, you know, they just use the same old thing. And I'm going to have to dig into, you know, the talks I've given about SVG are kind of trying to dig into why I think that is and stuff like that.

But the book itself is just like, you're a front-end developer. Here's what SVG is. This is what you should use it for. This is, you know, some techniques and stuff that you should be aware of.

And the book is short, you know, all those book apart books are, you know, kind of the, I don't know, I guess the marketing or thought behind them is that, you know, if you have a couple hour plane ride, you could probably get through the whole thing, you know, just it's a one sitting kind of book and, you know, mine's no exception. Yeah, definitely. I haven't really played around with SVG enough. You know, it's something that I should definitely do.

I think SVG, my use of SVG stuff like icons, just getting vectors into a page. But one good example of SVG I saw recently was on, have you seen the website for, on Apple where they're showing how to shoot photos on the iPhone 7? No. You've probably seen that they released a series of videos recently on how to use the iPhone 7 camera to shoot different styles of photo, basically just teaching how to use the camera.

And on the marketing page for those videos, they're, you know, the hero image at the top, they've got a video playing in the background and the text that's overlaid on that video is an SVG and then it's got, it's using blend modes. So as the video is doing on the background, you're getting this, you know, the blending of the text and it looks so cool. But it's just something, one of those things, one of those uses of SVG which may not come, you know, come to mind straight away. It's quite, you know, creative use of it.

So yeah, you should check that out as well. I'm going to do it. I haven't seen that at all. Thanks for letting me know.

That's awesome. Yeah. And you know how, how do I phone, you know, the interfaces got all these blur effects and they're making use of SVG icons to, to do those blurs on the web as well, which is cool. So having some synergy between iOS and what they're showing on the web.

So cool. Yeah, brilliant. Okay. Well, that's all of my questions.

Is there anything that you'd like to mention just before we go, like any plugs or, you know, where can people find out more about you? I can't do it. You've given me the whole show to do plugs for myself. So that's okay.

I don't have much else. I mean, a lot of times I, you know, when given the opportunity, I tell people about code panners about the new code pen projects, but we already did that kind of thing. We also have team plans on code pen. If anybody out there listening who works on a team, the point of them is that we've kind of learned that we haven't done a very good job of explaining this to people.

So I guess I'll take this opportunity to attempt it when you are on a team on code pen, you can like switch back and forth between whether you're using code pen like as yourself or using it as a team. So like I can be on team CSS tricks on code pen and I am and I just can easily toggle back and forth whether I'm using it as CSS tricks or I'm using it as myself and I use it as myself because I'm just, I don't know, playing around by myself. I'm building something as me or I use it as a system building like a demo for the site and there's, and when I'm on a team, of course, there's multiple human beings on that team, like our whole staff at CSS tricks is also on team CSS. So if they need to change one of my demos, they just go in and do it because they have the same access to that, the pen that's owned by the team.

They have access to the same bucket of assets. They have access to all the same collections. They can see all the private pens, the team owns. I mean, that's the point of having a team is that you're all sharing it together.

It's all paid together with one credit card. Yeah, and you know, you all have access to the same bucket of stuff, but everybody, you get to maintain yourself on code pen. It's not like, it's not like you have to make this hard choice between like, you know, do I give up my personal code pen account to be on a team or anything like that. It's just like, no, you're just on that team as well.

OK, no, that's really good. Yeah, I've never noticed that feature. So I'll have a look at that as well. Maybe suggested to the guys at work if anyone says they want to sign up for it.

Sure. All right. You know, I think it's compelling to, you know, when I can get somebody's company to pay for it for them, you know, like, you're at a big company. You should provide this for your employees.

Not that I don't think it's worth it for any team, but I think that's the perfect use case is when you can get your company to buy it for you. Yeah, exactly. Yeah. All right.

So, yeah, it's just generally on the web, you're known as either Chris Square for your personal stuff, but otherwise, real CSS tricks. Yeah, that's just the cheesy Twitter thing because CSS tricks was taken. Twitter and GitHub and Instagram and stuff. Yeah, I'll pick a bunch of your social profiles and stick them in the show notes, but I'm sure most people who are listening to this know already know who you are and they already know where to find you.

And I'm sure they're already following you anyway because why wouldn't they be? Yeah. So yeah, it's funny. Yeah, thanks for being on the show.

It's been a pleasure. My pleasure. Thanks so much for having me. It's on.

Next time I'll get to ask you all the same questions at some point. Sometimes I'm like, I got to talk about myself forever, which I'm happy to do, but I'm interested in other people too. So we'll chat again, A. Yeah, definitely.

You ever have guests on your show on the shop talk? Yeah, yeah, it's kind of 50 50. Whether we have a guest or not, so maybe we'll get you over there one of these days. Yeah, I'd love to.

OK. Yeah, I'd love to. I'd love to do crossover. All right, take care.

Yeah, thanks a lot. OK, fixing the bite. OK, so that was episode 10 of Inspect. Thanks once again to Chris for coming on to the show and being a great guest.

You can find all the links to everything mentioned in today's episode in the show notes at inspect.fm. If you have any questions or any comments or any feedback, you can take me up on Twitter at InspectorFem or got me an email on InspectorFem at gmail.com. All these details on the website as well. And if you liked what you've heard in the show, be great.