Christopher Schmitt and Simon St. Laurent discuss HTML5

Are we entering a new revolution on the web? HTML5 author and conference organizer Christopher Schmitt sat down to talk with O’Reilly editor Simon St. Laurent about why it’s a great time to be a web developer. The new HTML5 spec has brought back the conversation about the web. Developers have been hacking the web for the last several years, and now those techniques have been pulled out of the hands of the developers and into the browser for better, faster websites. Let’s hope we see continued innovation in the coming years to strengthen the ecosystem and personal connections.

Highlights from the full video interview include:

• HTML5 and friends. HTML5 is often thought of a collection of technologies released at the same time, even though they aren’t all technically “HTML5”. [Discussed at the 0:39 mark]
• The open web has won. Frameworks have given developers a way to create and share advances across browsers. [Discussed at the 03:29 mark]
• Relieving your headaches. Native video and audio reduce the number of tasks needed to get media content on the web. [Discussed at the 05:20 mark]
• Hybrid skills. Web developers need to understand code, design, and UI/UX to thrive in this evolving world. [Discussed at the 11:50 mark]
• Design friendly CSS. Despite all the focus on HTML5 and JavaScript, CSS is growing ever more powerful and important. [Discussed at the 14:23 mark]
• Accessible PDFs. PDFs are part of the mix, even if they follow a different track. [Discussed at the 23:46 mark]

Not a fan of video? Here’s the full transcript from the interview.

Simon St. Laurent: [0:06] Hi, I’m Simon St. Laurent. I’m here today with Christopher Schmitt. He’s the author of The CSS Cookbook, now in its third edition, and more recently, The HTML5 Cookbook. He also runs a lot of online and some in-person conferences, notably the CSS Summit and jQuery Summit, which are online, and In Control Orlando, which was last month, I think. A pretty big web show. Welcome.

Christopher Schmitt: [0:35] Thanks, Simon. Hi, everyone.

Simon: [0:39] I thought we’d start off today by talking about HTML5. The cookbook just came out, and HTML5 seems to have brought back a whole set of conversations that I think people thought were over. HTML was so quiet. Can you tell a little bit about HTML’s comeback?

Chris: [1:01] Well, it’s not really a comeback. It’s more of people, in my opinion, just when they build web pages or websites, are reinventing the wheel over and over again in order to build web apps and web sites.

[1:17] With HTML5, the editors and the writers of the spec just said, "What if you just stop doing that and actually put it into the spec, instead of keep on doing it over and over again? Actually build a web like how we’ve been building it for the last ten years or so, and not try to keep on doing things that are typically invalid, but people everyday use them," so that’s really how that got started. People just realized that…

[1:52] I think is a way where you’d say the web has matured. It’s 1993 where it kind of took off, and now it’s 20 years later, and so people say, "Well, we’ve been building websites for a while. We kind of get what we’re doing right now. Let’s just stop and take a look at what we’re doing, and see how we can get these hacks or techniques out of our hands and into the browsers’ so that we can just build better and faster web apps." I think that’s where HTML5 got kick-started, and got people’s attention.

[2:31] Also, when people think about HTML, it’s not just about HTML elements or tags, it’s also a whole slew of APIs and JavaScript new editions. There’s where my coauthor, Kyle Simpson, came in and did a good job of exploring a lot of the new stuff that comes with HTML5, or as we call it, HTML5 and Super Friends.

Simon: [2:55] And Super Friends, yes.

Chris: [2:57] Yeah, because technically it’s not an HTML5 spec, but it’s technology that came along at the same time. As they come on at the same time, people kind of lump them into HTML5. I’m totally guilty of all that stuff in HTML5, and I’ve started to not get ticked off as much as possible. People sometimes lump CSS3 as HTML5, so I try not to get too riled up about that

Simon: [3:27] Yeah, it seems like it’s a whole package now. The HTML, CSS, and JavaScript fit together a lot more tightly than they used to. I remember applying for jobs, and JavaScript was really the focus of the job. It was a specialty. It wasn’t just something that came in your typical web dev package.

[3:47] I guess everybody kind of knew some JavaScript. You had to know a little bit to set some hooks for a menu or something, but it seems like we’ve reached a point where the technologies are separate, but the way we use them is really deeply combined.

Chris: [4:06] Yeah, I think so. I think, with JavaScript, and with CSS, and HTML, it’s like this one big package that you can take almost anywhere to almost any job. I think, in a way, the open web has won. You can actually, with tools like PhoneGap, and, I forgot what that… Titanium…

Simon: [4:33] Titanium, yeah.

Chris: [4:34] …all the other frameworks is that you can just build your app with HTML, CSS, and JavaScript, and the PhoneGap uploads the cloud and get an app back, and for Android, and for iOS, and still have that same foundation that you use for the web. It’s really a great way of just democratizing publications, publishing, and just work, essentially. It’s really just a great time to be a web developer.

Simon: [5:12] It feels like web developers are on the way up again. We sort of went quiet for a while.

Chris: [5:18] Yes.

Simon: [5:21] There are a lot of different pieces to HTML5. There’s the markup itself. There’s the API. They went so far as to redefine how you parse HTML5, though I don’t think a lot of people are reading that. What pieces really stick out to you? What really solves your headaches?

Chris: [5:46] What’s really interesting to me is the discussion of video. I think that’s where Adobe’s Flash has reigned supreme, and it still does to some extent, too. But if you have an HTML5 capable browser, you can actually just have native video playing in your browser. You don’t need to have a plugin to view it.

[6:10] There are some extensions in JavaScript that will actually override Flash and pull in HTML5 video for you, so you don’t have to use Flash all that much if you don’t want to. That’s how I surf YouTube, actually, by pulling an HTML5 video first. That way I can actually bypass the ads, so it’s really great.

Simon: [6:32] One thing I’ve noticed, my Flash ad blocker doesn’t work anymore when people are using HTML5 video instead.

Chris: [6:39] Yeah, I know. We’ve got to come up with new ways. But yeah, I think video is a really great thing. Also, the stepchild to that is the audio, which is really great. I just recently started a new podcast called "The Non-Breaking Space Show." So it’s been interesting just to see, to be able just to drop audio into a web page and not have to worry about a Flash mp3 player.

[7:05] We still have an mp3 Flash player as a backup, but it was just really nice to be able to see it and have it be playing, and you don’t have to worry about forcing people to download the mp3 file before they play it. That was pretty cool.

[7:19] The one thing I really like, it goes back to our discussion earlier, just about how it’s HTML5 and Super Friends, is geolocation, which is not really a part of a spec for HTML5, but it’s a different spec altogether. Basically, it just talks about how a browser, if you give it permission first, will be able to determine, within a certain boundaries and limitations, where you are in the world.

[7:47] I find that just so amazing and so useful that if you just have this one piece of information of the user, of where they are in the world, you can just leverage that in so many different ways. I go back to the story of how I recently moved to Austin, Texas, home of South By Southwest, which just happened. I just moved, and just like when you normally move to a new place, you need new stuff for your house.

[8:17] I was at a gas station, and I was out doing errands. I’m like, "I need to find the nearest Home Depot, or Lowes, or home store." So I got out my trusty iPhone, and I did the "pull up the store’s website," and at the time, it didn’t have a geolocation built into it, so it would just show me listings that were in my zipcode. That could be around the corner, or 20 minutes away. I was just like, "Wow. This is so not helpful whatsoever."

[8:51] It actually drove me to work with… Actually, my co-author, who wasn’t my co-author at the time, but Kyle and some other great JavaScript people to come up with a jQuery plugin that we could just give to designers who aren’t heavy JavaScript people and say, "Hey, here’s a list of… Just code an address in a human friendly way that we all do on envelopes to mail letters, and cards, and whatever. Just list them in a normal way, and this plugin will just sort them by whichever one is closest to the individual browsing."

[9:26] Just having that one piece of information, we just take static information and make it more valuable to the visitors for the site. That way, if you have, like, a store listing, you can say right away, "This one’s closest. You don’t have to travel very far," and you get them into your store or your department faster that way.

Simon: [9:49] This is something we weren’t really thinking of back when everybody has desktops and even laptops. It just wasn’t an issue.

Chris: [9:56] Yeah. It’s like, the mobile phone had to tell us, "This is really cool, and we need to have it with the GPS unit," and then rush it into a spec.

Simon: [10:07] Right, and something else you said there is, you wrapped it up for jQuery so people could just plug it in. That seems to be the way things are going these days, where they come up with an API, and it’s useful, but things really become genuinely useful to a lot of people when you can just drop it in with jQuery.

Chris: [10:29] Yeah. I love jQuery a lot. I have a design background, so I’m not a programmer day-in, day-out, and I’m a big CSS nerd, and I love CSS. To be able to select objects and elements in jQuery easily with jQuery, I think that’s one of the reasons why it’s almost the de facto JavaScript library out there. It’s just an easy way for the designers who aren’t developers to use it but, also, if you code it well, developers will love it too.

[11:04] I think it’s just a great way of, "We have an idea, and it’s JavaScript based or focused, just wrap it up in jQuery. Sometimes, maybe you just need a simple JavaScript solution. I’m not hear to say jQuery everything — bam, bam, bam, bam. But it’s pretty good. I love it. We’ve been producing the jQuery Summit just for the last three years, and we just love it, and we have two tracks.

[11:35] A designer track for people who aren’t super coders, but they know there’s lots of cool stuff out there, and also we have a whole track just for developers, who just want to go beyond the basics and just dive into how they can leverage it for their daily work.

Simon: [11:49] Well, that division is something I’d like to talk a little bit about. I talk about web developers as people who are generalists, and web programmers who tend to be focused on programming, and then there’s the pure designer, who definitely still exists, is critically important, especially in larger projects.

[12:14] You just keep working with technologies across all of these boundaries, and I get a sense from places like South By Southwest that these boundaries are blurring, but they’re still places where a lot of arguments happen. How distinct do you see these things being, and how do you see that changing?

Chris: [12:38] It’s probably like, in too much inside baseball, but we do online conferences for four years now. We started jQuery Summit as a one day track, and we started out with designers first, sessions that were focused on designers, and then we moved to advanced towards the end. So if you wanted to stick around you could, if you’re a designer or whatever, and vice versa.

[13:12] The feedback we got was just… The designers were ticked off by the heavy coding sessions, and programmers were ticked off by the light, or design-oriented sessions, and it was across the board, so it was kind of weird. I felt a little bit sad, because I have a designer background but I feel like I can understand programming, and can hack something together pretty well. I feel like I can cross those boundaries pretty well.

[13:48] I respect programmers who can program really well, and I respect designers who can do just awesome, awesome work, but I feel like there needs to be more of a hybrid approach, or at least respect, for both disciplines, because programmers make the engine work, make the car go, and designers make the car look really nice. It’s really great when you bring the two together, but you can’t have one without the other. You can have like a T40 or you can have a really cool sports car if you work with the right people.

Simon: [14:23] Right.

Chris: [14:29] At South By Southwest you fill find a lot of cool people who are hybrid. I find that. But you also find people who come form large organizations and large shops that need you to be disciplined into one area. Like you are UX guy, you’re the designer, you’re the programmer so this is what you do, and so on and that’s your discipline. I’m not saying that’s all you would be doing in those shops, but that’s most of what you’d be doing day and in day out.

[14:59] For those larger shops that what you need but for like the independent producer, or the freelancer, you need to be able to, in my opinion, juggle a lot of different things. Just by the definition of being a freelancer you have to do that.

Simon: [15:15] Yeah, a lot.

Chris: [15:16] You have to juggle your business, taxes, and all that sort of thing. Personally I would love to see more of a hybrid approach, but there’s still such divisions out there for programmers versus designers which I’m kind of saddened to see.

Simon: [15:32] Right.

Chris: [15:33] It’s something that we’ve been talking about for ten plus years now, that is, the hybrid designer.

Simon: [15:42] The conversation doesn’t ever go away on this it just keeps going around.

Chris: [15:45] No, and the sad part is that you run into so many talented people, especially at South By, or other companies, or just online via Twitters or Facebooks.

[16:01] You find somebody who’s really good at design, or someone who’s good at programming and we talked about how awesome the open web is with the stack and HTML5 and JavaScript and to be able to go to native apps with that technology. The world is right there for the taking if you just have that one idea and that workhorse ethic to push it out there, and you can go farther than generations have dreamed of going.

[16:34] I don’t want to be like over the top on that or dramatic but you can have an app that millions of people will be downloading and that’s hard to believe if you’re from Small Town, USA. That’s totally possible. A small town, Russia, where ever you are. Really, it’s a great time to be alive. That’s my Disney speech.

Simon: [17:04] Yes, it’s OK. I’d also like to talk a bit about CSS. The The CSS Cookbook has been successful. You’re in your third edition. I think about how that book has grown, and I think about how CSS has grown, and I know CSS3 seems to…

Chris: [17:25] You’re talking about hair being grown, right?

Simon: [17:28] No, no, CSS is growing much faster than that. It also seems like there are pieces of CSS now that almost are programming. So some of the transformation and animation stuff, I hear people talk about matrices and I’m like, "Wow." How do you see all that going, blending, blurring with JavaScript, and are people who really expect CSS to be purely a design thing going to be surprised when they get into this?

Chris: [18:04] Yeah, it’s a suspicion I’ve had with other people who write specs for CSS and who are advanced on CSS3, they are surprised when I actually tell them that CSS was designed to be designer friendly. They go, "It is? It was?"

[laughing]

Chris: [18:24] Yeah, not so much now, but back in the day before we had stuff like transformations, CSS3 and all this other stuff. I do feel a little bit of pain just because it’s not going to be as designer friendly. I love CSS because it’s easy to get into but it takes a lifetime to master. And in doing that you can just come up with some amazing things on the way. With CSS3 I tell people it’s like putting Photoshop into the browser.

Simon: [19:06] Yeah.

Chris: [19:08] Photoshop is so huge and so massive, with the whole adage of "We use ten percent of the program, or software application that we get." Ten percent of Photoshop is a huge chunk. Being able to do that with CSS animations and transformations, it’s going to be harder to do that, to maintain that as one person trying to get all that taken care of.

[19:34] But with JavaScript you’re seeing a lot of hooking into CSS transformations, keying off of events. Those type of basic things you’ll probably need to know, so when you scroll certain CSS animations fire off and they start firing off, you’ll see more of that coming along. You’ll also see, for instance Adobe is working on some tools, to help designers be able to export animations. There’s already Flash to HTML5 exports that they’re working on.

Simon: [20:11] Right.

Chris: [20:14] There are also animation tools that they are working on. They’re no where near as semantic as their output needs to be, but they’re working on it. I’m hoping with the next releases of Dreamweaver and these beta labs they’re working on I think it’s going to be really great and friendly for designers to use. It’s getting deeper and deeper in terms of being designers trying to match all this. Actually with the CSS Summit we’re looking at a whole new track for pre-processors.

Simon: [20:52] Oh, OK Sass.

Chris: [20:53] Sass and Less. If you started just building a minimal website with CSS it’s pretty easy, but once you start building larger and larger web pages and trying to have modules within your CSS files it gets pretty hard to maintain. With Less and Sass you’ll be able to cite variables, do little basic programming functions with CSS. Just having variables alone will be mind blowing. It’ll be cool to have.

Simon: [21:31] They did just start with variable spec for CSS recently. As somebody who learned a while ago that the only way to make an HTML, CSS, and JavaScript app work well on an old iPhone was to make CSS do all the work I possibly could make it do. I wonder how far we can push it.

Chris: [21:58] We’re still talking about variable specs, I won’t get into it.

Simon: [22:01] It’s OK, don’t worry about it.

Chris: [22:04] What I love about Less and Sass is there are tools now out there for Mac, there’s also some for Windows, but I’m mostly a Mac person. You don’t have to have it installed like RubyGem on your machine, there’s apps like LiveReload, Les.app out there, so you just set it on your machine, like LiveReload for example, and it will listen to a folder and once you write this code that’s set for Less or Sass it’ll actually output into static CSS. It’ll actually write everything for you, minimize it for you if you want.

[22:42] You’re still using variables, you’re still using Less and Sass but your actually delivering static CSS files to the browser. Once you’re done with a project the client can edit and do an update of their own without having any weird issues. I find that to be really great because that way you’re not relying on other, other things to have on top of it.

[23:03] I know there’s some JavaScript helpers out there that’ll take your Less and compile it on the fly to be CSS, and that is just asking for a world of hurt. Because you just have one more thing that your site is dependent on, and if that breaks. What you need to do is to limit the number of HTTP connections you need to make in order to make your web page appear.

Simon: [23:30] Sounds like a great idea for a world of infinite bandwidth and infinite connections. They don’t always work.

Chris: [23:39] Look at Flash, as an example.

Simon: [23:42] Yes, yes, it just doesn’t quite go. Just one last question. We have all this great stuff coming for HTML5 and CSS, JavaScript is getting some revisions and there’s always libraries and frameworks coming. What would you like to see? What’s missing? What would add extra excitement to your HTML OpenWeb life?

Chris: [24:07] I’m really excited right now.

Simon: [24:09] OK.

Chris: [24:10] I’m not sure what I’m missing, per se. Maybe accessible PDFs. That would be pretty sweet. I think PDFs are everywhere, they’re not going away any time soon. The discussion I was having recently was about making sure PDFs are more accessible to people. I know that’s not what everyone’s going to be thinking about.

[24:37] PDFs are everywhere, but they’re not as accessible as they should be. They’re used in government work, they’re used in private colleges to organizations, privates and non-profits, so to be able to have them be out-of-the box accessible would be great. There’s still some work coming off of that.

Simon: [25:00] I actually have a couple of projects going that relate to that, so it’s good to hear that. One we already have out is PDF Explained, which looks at the format. We have another one on building rich PDFs, which is in a lot of ways getting past the "throw a bunch of scans in a file and call it a PDF and sending it out." I think we’re getting there, it’s just getting people to do it right is kind of a hard thing.

Chris: [25:30] The caveat, or tangent, to that is to make sure when you click on a link make sure you tell people it’s a PDF.

Simon: [25:37] Yes, I always try to do that.

Chris: [25:40] Yes, accessible PDFs, big problem. Telling people it’s a PDF is a small problem, I think we can solve that one.

[25:50] So I think it’s a really great time to, with HTML and CSS. I think the only thing I’m scared of is this momentum stopping. It’s like the IE6 to IE7 to IE8, that was just really stilted, some of that can be blamed on the dot com bust. I don’t care whose fault that is. That four year span where we didn’t have any innovation in the browser space really. It didn’t kill us because we’re still here.

[26:27] It just led to not a lot of cool stuff happening. Now you have Chrome, and FireFox, just developing on a light speed development cycle. They’re constantly updating their browsers for small changes, for security reasons, what have you. It’s going to make my job as a writer a nightmare. I don’t know what version I’m going to end up writing, like it’s version 5.67.

Simon: [26:59] Right.

Chris: [27:00] This might not work. I hope it doesn’t stop, once it stops we’re stuck with whatever we had in that moment of time to deal with. Hopefully it won’t be another four to seven years of waiting for the marketplace to be ready for the web. I think we’re ready. I don’t think it’s going to happen anytime soon, knock on wood, but that’s just one of my biggest fears is that I don’t want it to stop.

Simon: [27:32] Think about the quiet in that four to seven year period we had the ecosystem faded. There were a lot fewer books, there were a lot fewer conferences. People lost a lot of the connections they had when it was exciting and new and "we have to get everything right this time." I feel like that energy is back.

Chris: [27:52] Yeah, it’s back in a big way. I’m in Austin so I talk about South by Southwest more than other people do, so registrations for interactive were huge last year but they were up 20 percent this year. Which is, I think, 20,000 people. That’s just for the interactive. South By is known for its music, for the film festivals. So when you have interactive just devouring a music festival you know it’s a good industry to be in.

Simon: [28:25] Yeah, this is the first year that I was going and I was reading the news headlines and they were all about interactive. They weren’t about film or music so much. It was very strange.

[28:39] OK, great! Good times! Things are going well. Thank you very much, Chris.

Chris: [28:44] Thanks, Simon.

Simon: [28:45] Looking forward to seeing a lot more of you and encourage everybody to check out your conferences and your books.

Related:

• Subscribe to the free Code podcast through iTunes