Transcript

Jen

[00:00:00]This is The Web Ahead, a weekly conversation about changing technologies and the future of the web. I am your host Jen Simmons and this is episode 63. I first want to say thank you, of course, to today’s sponsor, Media Temple, and we’ll be talking about them more later in the show.

So today we’re going to talk about, you know, I’m not really quite sure what we’re going to talk about today, I just know who the guest is, and I know that he’s really smart, and really awesome, and knows a ton about design, and the web, and CSS and front-end technology, and tools, and hot new whatever, so, I thought we’d just have a conversation today with Chris Coyier. Hi Chris.

Chris

[00:00:44]Hey, thanks for having me. I’ll take the awesome part. I don’t know about smart. [laughs]

Jen

Well, you run, for people who don’t know already who you are, which I’m not sure anyone who writes any code, especially writes any CSS, they’re going to have googled something and found you, whether they know it or not. Because you run the website CSS-tricks.

Chris

I do, that’s me. Yeah, it just has become huge for keeping at it for so long. Over all this time, there’s now like thousands of post on that site that are about all kinds of different CSS topics and you know not just limited to CSS. It does have kind of the most dorkiest name of all time, but it’s like, too late, you know. Kinda gotta roll with that one, and there’s a lot of stuff about CSS on there, but these days it’s just about anything web.

Jen

Yeah. Well, it does seem to always show up in search results like, oh my gosh, flexbox, what’s that? How do I do it? Oh look, of course, CSS tricks will teach me.

Chris

I lucked out that way. I think some of it is luck, but it’s been around a long time. It’s the domain name has been registered for a long time. There’s lots of content on there. There’s a decent amount of incoming links, it has the right Google juice, all the right stuff to make Google like it. Thankfully.

Jen

It’s good. There’s good content on there that does really help us figure out how to do this stuff. You also run Codepen.

Chris

[00:02:16]Yeah, it’s newer than CSS tricks. But it’s much bigger now. That’s my business, as it were. You write HTML, CSS and Javascript, that’s a good code editor for front-end code in the browser. So people make demos there, you have a public profile, so there’s kind of a social component to it.

When you go to the homepage of Codepen.io, you have lot of the coolest stuff people built there that day, similar if you go to Dribbble and see all the hot stuff for that day or the stuff from the people you follow. Its similar to that, just it’s not screenshots, it’s HTML, CSS and Javascript stuff.

Jen

And its cool because I think for a long time, many of us learned how to make websites by looking at other people’s websites and looking at the code by clicking view source. And the code was fairly simple so we think about it and reverse engineer it and then play around and write our own code and see if we could do things.

But now things have become so complicated, and lots of times when you view source, what you’re looking at is a big, giant pile of scrambled something and it’s minified and you can’t really read it and it feels like Codepen has become a new place to go. Rather than looking at the entirety of a whole giant system, coded for robots, you get to just look at individual examples.

Chris

I like this, can I use this soundbite?

Jen

[Laughs] And you can then see, you don’t even have to view source because the code is printed right there on the page for you, so you can see the HTML or the CSS or the Javascript that people are using.

Chris

That was the whole idea, the beginning was that I was jealous of other sites that had tread this ground before we have. And it’s such a compelling way to look at a demo because it’s trimmed down to just what you need to look at and you’re looking at both the demo and the code in the same place. That’s so much better than even on CSS tricks how it links someone to a demo page that I’d created specifically to be a trimmed down version of what I was trying to show.

But still, you've got to bust out Devtools or Firebug or literally view source or whatever it is to see what was going on and gosh, that’s ok. At least it’s a trimmed down, reduced test case of what you’re trying to show, but it’s not nearly as compelling as that kind of multi-panelled approach where you can see all the code and the demo together AND have it be editable.

Jen

Yes, because then I can just sit here and edit somebody else’s demo, and be like, why does that say 50%, what happens if it says 40% and why does it say left? If I change it to right, what happens? I don’t have to have any fancy anything, I can just mess around on the web page and play, and then I can fork it because you’re awesome smart, and then I have my own copy and I can save it.

Chris

Right, which can’t be deleted. Now you get to have that forever, which is nice. And change it if you want to and maintain a history and it links to who you forked it from, just to have some credit where credit’s due. That’s the idea of it, and it’s growing up. It’s not only that, I mean, it is that, but there're so many other features. You can go Pro on there and use it to teach, not that I’m trying to make this into advertising for Codepen, we can talk about something else.

But you can use it to teach, you can use it to collaborate, you can upload any assets. We just released a new feature yesterday so you could have a team so it’s shared billing and you can disseminate and work together, like a teams feature. Anyway, there’s so much stuff you can do with it and we’re growing all the time. and that’s what I’m trying to turn into the thing that I do that’s my business and my job.

Jen

Yeah, because then you have the podcast Shoptalk Show and, is it called Codepen Show?

Chris

[00:06:15]We call it Codepen Radio. I’m not in love with that name but I like the word radio, for some reason. Even though we know we’re not on the real radio, it’s just kind of a cool word. We want to document our lives at Codepen so it’s all about us, a little narcissistic but it’s interesting, at least I hope anyway, documenting what it’s like to have a business startup these days. Like what are the things we’re thinking about and how we are dealing with it. Let’s talk about money, let’s talk about funding, let’s talk about all that stuff that goes into running a web business because there’s so much.

Jen

I was listening the other day, actually, to Codepen Radio and it was like the story of the three of you, how you met, how you got started and you quit your jobs and you just run Codepen as your job. Just to hear the details of how that’s possible is really kind of awesome.

Chris

Thanks. And what were the risks and all that, that’s the kind of thing that we cover on that show. And there’ll be upcoming topics like I have an idea for a show called Bad Guys, like who are the people that have made this hard for us on purpose, who are the nefarious people out there that make our lives difficult or that’ll just be the subject for an upcoming show. It’s kind of topic by topic.

Jen

[00:07:32]Yeah, well, I’ll put all these links to these things that you’re working on in the show notes which people can checkout at 5by5.tv/webahead/63 and see all links and go track all these things down and find out all the crazy cool stuff you’re working on.

But let’s talk about the Web. You’ve got your head in all this stuff all the time, you’re not only writing code yourself and paying attention to what’s new but you’re watching other people learn and you’re keeping track of what other people are doing and need and thinking and when you speak at conferences, so what do you see right now as trends? What is something that you’re aware of shifting 2014?

Chris

[00:08:24]That’s interesting. We’re entering, what I jokingly call RWD 2.0, which is not even funny, but it’s like everybody gets what that is now, so there’s been a little bit of discussion about what do we mean when we say that and a little bit more retrospective.

Jen

Just to set the context, RWD, responsive web design.

Chris

Right, might as well say the whole word. And I don’t know, can we think about it a little more philosophically these days? So there’s some of that going on, and not just how do we do it, but why do we do it and how do we do it responsibly too, because you can write all the rules to do it, but can you do it in such a way that its better? You know what I mean? [Laughs]

I’m trying to define that as a trend because I see a lot of articles about that recently. And I think that it’ll be something that people are talking about for the next, hopefully, forever, but that’s kind of a trend going on.

The web is moving faster than it has in a long time, probably in the last entire year, or maybe even two years. But sometimes when you hear about a new feature coming down the pipes, it happens a lot faster. Like you hear about it, and then people are actually using it. So that’s kind of a new thing on the web that’s interesting.

Maybe there’s just some more maturity about what we’re doing, I hope. Thinking about what we’re doing.

Jen

[00:10:00]It’s feels like there are complicated tools and I've been doing this now for 25 years, I was first involved right on the forefront of the industry, the graphic design industry, switching from all analog, 100% analog. Everything was done with film, and you would take a piece of paper and cut it up with an X-acto knife and use a wax machine and use wax to glue down the piece and get everything all lined up on a piece of posterboard and put it front of this giant camera and take photo and everything was very analog.

It all switched to digital and it seems like there are these trends where there’s a new need but there’s not really any tool, so then there’s a whole bunch of little tools, a lot of independent developers, lot of independent software companies, little tiny companies, one person, making a lot of little tools and ideas. Also, it’s very hard to do that.

Some of those tools they all start out as kind of great ideas, first version, and then some of the them never mature and other ones do mature and then there’s this period where we’ve dropped the little ones, the fledgeling ones. But we’re all using the medium teenager ones and we’re still not sure which ones gonna be THE one and sort of eventually one or maybe two emerge as THE THING and that becomes THE THING and that’s THE THING for the next 10 years.

Chris

Yeah, that’s a great way to put it. I bet if we really thought about that we could figure out what the race was like for lots of different features that we now take for granted as the winner, but at the time there might have been multiple things vying for that spot.

Jen

So it feels like javascript frameworks or whatever.

Chris

Oh that’s a good one.

Jen

You know, like, pick a different Sass compression tool or Git tools or there’s been like a little fledgeling group and then there’s a handful of medium competitors and then there’s only one that emerges as the winner. Right now, it just seems we’ve been churning through all these different, like we need a javascript framework and we need a HTML starter kit and we need a Git tool and we need something to compress Sass.

Chris

And it feels like over time, one of them kind of wins. Like we’ve seen jQuery kind of win. I don’t think anybody uses anything other than that for that kind of DOM stuff but then it kind of morphs and now people are like you don’t even need that anymore, here’s the thing that’s going to replace it and there’s like four of them.

And then one of those is going to maybe win and it doesn’t mean a 100% market share but it means the vast majority of mind share and that happens collectively, nobody gets to decide this stuff, it happens organically. It happens because enough blog posts are written about it, or it clicked with people the right way.

Jen

Because for a while it was BBedit. You used BBedit to make a website, and then for a while, it was Dreamweaver, absolutely must use Dreamweaver. And then it was like this, that, the other thing and then it became Photoshop.

Chris

And now it seems that Atom might kind of win this over time, just because we all kind of, like I know lately there’s been skepticism but for the most part GitHub is a well loved place. Now they’re getting into the code editor market so of course we’re going to try that, based on their goodwill that they’ve build up already and it seems like it’s going to be a good product. The code edit yeah you’re right, that’s not a market that is shook out yet.

Jen

[00:13:34]Oh, code editors alone, yeah. Well they’re all so similar that it’s not a big deal for people to use different ones.

Chris

Yeah, unless it is. Like you use one that’s an IDE, that’s so ingrained in what you do that you can’t just switch because there isn’t a whole lot of players in that thing. Let’s say you write a lot of back-end code. I know there’s a PHP one that people are used to it, kind of, pseudo executing that code and seeing if there’s errors in it and that kind of thing you just don’t get if you decide to come out to Sublime text or Textmate or whatever.

You just don’t get the same kind of integration features. That’s just a pretty big aside, it could be even like which CSS properties get attention. What HTML tags become the ones talked about and which ones are forgotten.

Jen

[00:14:27]How do you keep up? What kinds of things do you pay attention to to keep up with what’s happening?

Chris

I mean I luck out in that I can’t avoid it. People keep me up to date in a way. Just because Twitter has such an active conversation around this stuff. I still do the RSS thing and subscribe to a bunch of blogs, I get out there. There’s just a lot of incoming activity for me, being comments on Shoptalk, comments on CSS tricks, the forums on CSS tricks. I attend in person lots of conferences and stuff.

I feel like I luck out in that I just get to ride the wave of being, for the most part, even for me there’s plenty of stuff that I never even heard of. Even if you get the luxury of having everything come to you as I do, it’s still hard to keep up. I can’t imagine what it’s like if you didn’t have any of these free incoming streams that I get to have, how you would do it. [Laughs] I have no idea, good luck.

Jen

I feel that Twitter is a lot of it. Twitter is a lot of it because you start to see everybody talking about this thing, that thing and so on.

Chris

[00:15:34]Sure. I actually did a talk one time on how you stay up to date, where I try to answer that question. I think I have it online somewhere and I kind of talked about it and I think if you need an easy answer, I didn’t mean to laugh it off and say like there’s no way you can keep up with the web, hahaha. You can.

I think if you do that, find a couple of good conferences and go to those. Find a couple of newsletters. I’m a big fan of the web platform daily, really good one, It goes out every single day, so if you’re just pining for the links of the day, they’re in there. But there’s web design weekly, responsive web design weekly, so you can if you want to be a little passive about it. Just sign up for the newsletters of our industry and I think you’ll do ok.

Jen

[00:16:22]Yeah, and listen to our shows. Listen to this show.

Chris

Oh well, The Web Ahead?

Jen

That’s all you have to do.

Chris

Indeed. Well, really, there’s good stuff.

Jen

And so, what kinds of things in CSS are you seeing these days that are exciting? That are not only fun code to make our jobs easier but what interests me even more is new technologies that enable us to actually make websites that are different from what was possible five years ago. That will become, perhaps, new trends in design, or new ways to reach an audience.

Chris

Yeah, that’s a good way to put that. What’s some tiny new little feature that happens to work now but it didn’t before but its the impact of it that will be pretty light. I think we’ve all heard of Flexbox, that’s a big deal because it’s maybe you’ve been in this for 20x years, 25 years, there’s never been a layout mechanism that’s really been any good. That’s tried to adhere to this medium, like, oh I get what you’re trying to do, let me help you be that. Flexbox might be the first one, and we’re right on the verge of that working. So I think that’s a big deal. Maybe you’ve talked about that to death on this show.

Jen

Not really. We’ve talked about, I forget who was on, we’ve talked about layout, but we could spend a little bit of time talking about Flexbox and about CSS layouts because I think that is a big area. It is a big deal.

Chris

Didn’t I see a tweet of yours yesterday about the new Firefox?

Jen

[00:18:04]Yeah, I’m like freaking out about it. [Laughs] I’m sounding very calm right now. But no, yesterday, Firefox 28 shipped. And usually I don’t pay attention to these new releases, but I’ve been waiting for 28 specifically for months because they added Flexbox flexwrap support to Firefox. So basically what that means, because not everybody who listens to this show is a developer, it’s just a show for all sorts of people, you could do this layouts with Flexbox. I’ve worked as a developer where you get a design from a bigger team, perhaps from an outside agency, and they mail over these PDFs and some of the details in those PDFs in the past were literally not even possible and it would be frustrating because it’s like, why did you design this website? You’re supposed to be a professional web designer and yet some of the things that you’re imagining are not possible. And now a lot of those things, a few of those things are now actually going to be possible with Flexbox.

And one example that people give a lot is, if you have five links in a row, in a bar, it used to be that mostly you would just end up with them kind of all squished to the left next to each other. So you could put space between them but you’d have one two three four five, they wouldn’t be centred in the width of the whole screen. Or if you made a responsive site or a fluid site where the box that they’re in grows and shrinks as the browser window grows and shrinks those links aren’t going to necessarily go closer to the right hand side they’re just going to stay together on the left. And maybe you want them to be evenly spaced all the way across. So that’s the kind of thing that you can actually do now with Flexbox and that’s been possible for a while but the things that you could not do until yesterday at least, you couldn’t have them in firefox until yesterday, was perhaps doing a whole page layout.

Chris

I think the way that you put this is that let’s say you have those five links which is a possibility and you want them to stretch the whole way across, you could get it done with floats and you could get it done with width = 20% but what if all of the sudden you have 6 now. You have to refactor everything because now 20% isn’t 20% anymore, it’s I don’t know, 17.5% whatever that number is, it gets a little bit more complicated whereas Flexbox is like, oh I get what you’re trying to do, here no problem, let me just slam another one in there. and then let’s say it gets narrow enough to the point where those five links are at a minimum they can be, like a 100px wide but if it’s any smaller than that the edges are creeping up on the text, it’s really looking gross. Well, it doesn’t know what to do with that. You told it to be this x percentage wide and it will just squish. It will just squish them and it will just look like garbage and now again we have to think about but just a bunch of stuff in our CSS maybe instead of floats, we use inline blocks so that they’re able to wrap or something, you know it’s clumsy and gross.

Jen

It’s fragile.

Chris

Yeah, it’s very fragile. If you force it not to be fragile, then it’s inflexible. Then it doesn’t help you as much as it could. With flexwrap it’s like okay I’ll squish down as far as I can possibly go to try and get your five or x links on one line but if I can’t I’m willing to wrap down onto the next line. And you can even define how you want that wrapping to happen. Do you want them on the left or the right? Do you want them to fill the space or not? There’s all this great stuff that allows you to write code that’s less fragile AND adaptable. So cool…

This transcript is in progress... check back to see more when it's finished.