Preview

Start a free Courses trial
to watch this video

HTML5 Boilerplate and Front-End Development - with Paul Irish

Name: HTML5 Boilerplate and Front-End Development - with Paul Irish
Uploaded: 2012-07-31T21:41:51Z
Duration: 1660 s
Description: Paul Irish is a web developer and a member of the Google Chrome Developer Relations team. He's been a part of many noteworthy projects including jQuery, HTML5 Boilerplate, HTML5 Please, and more. In this interview, Nick Pettit talks to Paul about the increasing complexity of front-end development, career paths, HTML5 Boilerplate, and several other topics.

27:40 with Nick Pettit

Paul Irish is a web developer and a member of the Google Chrome Developer Relations team. He's been a part of many noteworthy projects including jQuery, HTML5 Boilerplate, HTML5 Please, and more. In this interview, Nick Pettit talks to Paul about the increasing complexity of front-end development, career paths, HTML5 Boilerplate, and several other topics.

Speaker's Notes
Questions?
Video Transcript
Downloads
Workspaces

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[Nick Pettit]: Paul, Thanks so much for being here. 0:01

I really appreciate you coming out. >>[Paul Irish]: No problem. 0:03

[Nick Pettit]: So, for people who don't know who you are, 0:05

how would you describe yourself? 0:07

Who are you, and what do you do? 0:10

[Paul Irish]: I am a developer advocate 0:12

on the Chrome team right now, 0:14

and so I kind of focus on--that encompasses a lot, 0:16

but I focus on everything I can do 0:20

to make it better to create compelling content for the web. 0:23

We've got a lot of great content inside of Chrome. 0:28

I wanted to help educate people about that, 0:30

help people understand how to use things like 0:32

the Chrome DevTools better. 0:34

I also come with a big history of front-end development 0:36

and open-source projects that I work on 0:40

to help developers 0:43

learn what they need to know 0:45

to do better front-end development, 0:47

make better websites and web apps. 0:49

[Nick Pettit]: That's awesome. 0:51

You're involved in a million different projects. 0:53

You're doing Modernizr, HTML5 Boilerplate, 0:57

which I use all the time by the way. 1:01

You've been on the jQuery team, 1:03

and you've made all these really handy tools for 1:06

front-end devs. 1:09

This might seem obvious, but 1:11

what's the motivation for working on all these different things? 1:13

[Paul Irish]: I think part of it 1:16

is basically that I feel a lot of satisfaction 1:18

helping other people, and so part of it is just that. 1:22

Also, the other thing--I think this is actually another part that's happened-- 1:26

is that I have a really bad memory, 1:29

and what that translates into is 1:31

if I don't write something down, I'll forget it. 1:33

So, this happened in front-end development where you learn this technique 1:36

of using media queries or the viewport meta, 1:38

and you need to keep track of this 1:42

because this is the right way to do it 1:45

in this situation. 1:47

So, that eventually translated into what became 1:49

the HTML5 Boilerplate project, 1:51

where a lot of best practices were distributed 1:53

all over on blogs and books and things like that, 1:56

and I was just like we need to get this together 1:58

just to keep track of it; 2:01

so I can keep track of it and remember to use it on the next project. 2:03

So, that's helped me a lot and has helped other people. 2:08

The other thing for me that really drives me 2:11

is that I want the web to be 2:14

where people build great things. 2:17

I'm just really excited about anything that I can do 2:19

to help make the web be a stronger platform 2:23

for making great, really cool stuff. 2:26

[Nick Pettit]: So, you're very diligent 2:29

in tracking all of these different things? 2:31

[Paul Irish]: Because I can. 2:33

[Nick Pettit]: How do you balance your time working on all those different projects? 2:35

[Paul Irish]: I don't have a good mechanism 2:38

for time management right now. 2:40

I use a really cool tool called, 'WorkFlowy,' 2:43

which is like a super-enhanced 2:47

to-do method list app. It's really cool. 2:51

I set up priorities for myself 2:54

on a quarterly basis 2:57

and try and get them. 3:00

I think that's actually quite important, 3:02

which is to have a longer-term view of what you want 3:04

to attack, because it's so easy on a daily basis 3:07

to be totally distracted and 3:11

just be like, "I want to play with this new thing 3:14

and get it done. Oh, wow, something," 3:17

and then you totally forget that you have this much larger, 3:19

higher-impact thing that you should be doing. 3:22

So, it's hard, and I'm still really bad at time management, 3:24

but I'm working on it. 3:29

[Nick Pettit]: I know what you mean. 3:31

With being involved with so many different projects, 3:33

I guess you kind of have to keep a big-picture view 3:35

as to what all those things are working towards. 3:37

[Paul Irish]: Yep, and what the priorities are. Yeah. 3:39

[Nick Pettit]: Cool. So, before we continue, I want to back way up 3:41

and just get some of your history. 3:45

Where did you grow up and what were you into? 3:47

[Paul Irish]: Sure. I'm from Western Massachusetts and Connecticut. 3:50

So, I'm from New England where we say, 3:54

'wicked,' 'It's wicked cool.' 3:58

[Nick Pettit]: Wicked. 4:00

[Paul Irish]: I was into music. 4:02

I was in the marching band; I played the tuba. 4:04

I was into drama. So, I was a band and drama kid in high school. 4:08

I was really into music and, in fact, 4:11

the first time that I really got going online was 4:13

I created a music blog. 4:16

This was in--I put it out in 2004, 4:20

and I thought I was so late to the music blog scene, 4:24

but it turned out that I was one of the first 50 or so. 4:27

Having that environment where I had a website that had a lot of traffic, 4:31

and I could play with the design and experiment 4:34

and get a lot of feedback 4:38

on how people liked it, 4:40

that was one of the first times when I was really like, 4:42

This front-end development thing is a lot of fun. 4:45

[Nick Pettit]: That's when you first became interested in the web and technology? 4:48

[Paul Irish]: That was when I was like, 4:52

this could definitely be full time. 4:54

I'd been playing with websites. 4:56

Back when IE4 came out 4:59

they did this really cool marketing campaign. 5:01

This was when the DHTML term arrived, 5:04

and so they had this marketing campaign 5:07

where they rented out all these movie theaters across the U.S. 5:09

and invited a bunch of developers, 5:12

and I went and I got free popcorn and a free t-shirt 5:15

and a free Windows 95 install CD, 5:17

and they showed about what you could do in IE4, 5:20

and it was amazing. 5:22

So many great features came out then, 5:24

and so that was when I was like, 5:26

this interest of mine, there's cool stuff in here. 5:28

Eventually, it quieted down. 5:32

I went to college, but after that everything picked back up again. 5:35

[Nick Pettit]: So, did you go to school for this stuff? 5:39

[Paul Irish]: I went to school for-- 5:41

I got a degree in technical communications. 5:43

I don't actually know-- 5:46

I really do wish that there was more university-level coverage 5:48

for web development. 5:51

Front-end development is hard, and it's a pain, 5:54

and I wish that there was a more sophisticated education 5:57

program for this. 6:01

I got education in computer science and mathematics, 6:03

and management and communication. 6:06

[Nick Pettit]: With us being an education company, 6:09

I'm interested to know if 6:11

you feel like your degree really helped you 6:14

in your career, or--? 6:17

[Paul Irish]: Mine did, 6:19

and I think these days having a computer science background 6:21

has a very direct effect. 6:24

I wouldn't say 5 years ago that computer science would help in web development, 6:27

but nowadays, especially on the client side, 6:30

there's so much logic there. 6:33

You're writing jQuery, things are going good, 6:36

you're translating, you're writing larger applications. 6:38

[Nick Pettit]: It's getting complicated. >>[Paul Irish]: It's getting real complicated. 6:40

A background in computer science lays a lot of the groundwork 6:42

so that you're not making stupid mistakes 6:45

and taking 4 months to learn how you should have done things. 6:47

So, yeah, computer science has a big influence 6:51

on where the trajectory 6:54

of front-end development is going for sure. 6:56

[Nick Pettit]: Cool. Well, I think a big challenge 6:59

that's facing people coming out of college today 7:01

is how to make the transition to 7:04

a career and not just kind of hopping from job to job 7:07

or being unemployed. 7:11

How did you make that transition? 7:13

Were you just kind of in an internship, 7:15

and it was a really natural progression 7:17

or did you--? 7:19

[Paul Irish]: Yeah. I started out I was doing 7:21

some marketing for 7:23

a stationary company 7:27

that made wedding invitations and birth announcements, 7:29

and I wasn't even starting out with web stuff. 7:31

I was creating 7:35

a mail-merge Word document, 7:38

and then we were using that to fax blast all of our customers, 7:40

and I was customizing the mail merge to be 7:43

depending on the customer, and it was all this logic inside Word. 7:46

It was awesome. 7:49

That transitioned, within that job, 7:51

into working on their e-commerce presence, 7:55

and so that was good. 7:57

I think for most people 7:59

having something you can develop on your own-- 8:01

In my case I had my music blog, 8:03

but I think having your own web presence, 8:06

whether it's a blog; I think blogging is really good. 8:10

Blogging what you're learning is extremely smart 8:13

and having that place where you can iterate and play around. 8:16

So, when you see a new feature come out, 8:20

like you're reading a site and they talk about some new CSS3 feature 8:22

or something, make a demo with it. 8:26

Kind of explore it. 8:28

Put it up on CodePen. 8:30

There's a lot of communities now that are encouraging 8:32

and let you explore things, get feedback. 8:34

Having a social community 8:36

that you can talk to and explore 8:38

your own professional development with. 8:40

I had one, and it's just been very-- 8:43

It's a very smart way to go about things. 8:49

[Nick Pettit]: So what first attracted you to 8:51

front-end development, specifically? 8:53

Because you were making a blog, did you do that in WordPress or something? 8:56

[Paul Irish]: Yeah, it was WordPress. >>[Nick Pettit]: Okay. 8:59

Why aren't you, say, 9:01

like a Ruby or a PHP developer, for example? 9:03

[Paul Irish]: For me, the thing that really rocks about front end 9:06

is that you're building the interface, 9:10

and not only are you building the interface, 9:13

and you can make decisions around 9:16

how the interactions are, 9:18

but you're also getting feedback from its users 9:20

and from the customers. 9:22

The thing that they're touching, their cursor is going over 9:24

what you've created, and you're in a position 9:26

to where you can define the style of interaction 9:30

and the quality of the user experience. 9:32

Other people can work on how fast it responds 9:35

and a really strong infrastructure, 9:37

but the UI is just very sexy to me. 9:40

[Nick Pettit]: So it's kind of about that instant gratification then? 9:45

[Paul Irish]: The instant gratification and the feedback cycle of 9:47

I'm creating the interface, they're using it, 9:49

they can love it, they can be delighted by it. 9:52

Or they can hate it when I apply 9:57

a lot of text shadow to it and make it hard to read or something. 10:00

[Nick Pettit]: Sure, sure. 10:03

So, I want to talk about HTML5 Boilerplate for a little bit, 10:06

because I'm personally interested in it. 10:09

I think it's a really amazing project 10:11

for people that are just starting out 10:14

in web design and web development, 10:16

and I think there's a lot more that goes into it 10:18

than people might realize. >>[Paul Irish]: Yeah. 10:20

[Nick Pettit]: So, first, how did that project start? 10:23

[Paul Irish]: Before working for Google, 10:25

I was at an agency in Boston making websites, web apps. 10:27

We had a big team of front-end developers there, 10:29

and when I was going from project to project, 10:32

I was noticing that I was pulling lines of code 10:36

from my markup and from my CSS 10:39

from my last one into my new one, 10:42

and then I was like, well, I should probably make a template 10:44

just to keep track of this, and so I could start off with that template each time. 10:47

That's the original genesis, was just 10:50

that I needed to keep track of all this stuff 10:53

and move it forward from project to project. 10:55

Soon after, I got Divya Manian involved. 10:58

We put out a 1.0 just to see what everyone else thought. 11:02

Immediately it was really great 11:06

because inside HTML5 Boilerplate 11:09

is a bunch of techniques, right? 11:11

One of the things that has continued up until a little bit ago 11:14

is having inline documentation. 11:18

You see a technique, and you can instantly see 11:21

the website where that was birthed, 11:23

and someone can justify exactly why this is important. 11:25

So, it's kind of serving as an education tool. 11:29

You've kind of got to understand why everything is in here. 11:33

So, what happened is we put this out there, 11:36

and immediately we got a lot of feedback 11:38

over on GitHub where we open-sourced. 11:42

A lot of people coming in and being like, 11:44

Actually, I see what you're doing here, 11:46

but if you tweak it, this is a much stronger position. 11:48

It accounts for this edge-case bug in Opera 9.6 or something like that. 11:51

Every character inside HTML5 Boilerplate 11:56

has had a lot of discussion around it, 11:59

and so everything that you see is the result 12:02

of extensive conversations that have included 12:04

some of the best front-end developers in the industry. 12:07

You can go and look back at all those past conversations 12:10

in the old issues on GitHub. 12:13

The commits in the project, 12:15

the log messages have very desciptive 12:18

explanations of why we're doing this. 12:21

It's very well-justified in why all these decisions 12:24

are very strong as a baseline for starting your web project. 12:28

[Nick Pettit]: Cool. I think when beginning developers 12:31

look at HTML5 Boilerplate for the first time-- >>[Paul Irish]: We've got a lot. 12:36

[Nick Pettit]: --they're just like, "Wow." 12:38

"What's all this weird code?" 12:40

Let's talk about that a little bit. 12:42

From the top, what are all those IE conditional comments, 12:44

because that's the first thing people see? 12:48

[Paul Irish]: Yeah, so the IE conditional comments, 12:50

they don't look great. 12:52

They look kind of nasty. 12:54

It's like sometimes you want your mark-up to look 12:56

svelt and sexy and minimal, 12:59

and I love doing that as well. 13:01

Inevitably when you're developing-- 13:04

So, this is not a problem for IE6 and IE7, 13:06

which have no market share anymore. 13:09

IE8's definitely still around, 13:11

but it's been a case where 13:13

they have actual CSS bugs in their implementation, 13:16

and you can use CSS hacks, 13:20

like syntax hacks, to target them and change the width or something, 13:23

and change the padding 13:27

to make your layout work and to fix those bugs. 13:29

But using undocumented CSS hacks, 13:31

it doesn't allow you to communicate well with your team, 13:36

and when you're working in a group 13:40

you want everyone to read the code and understand. 13:42

So, the conditional comments 13:44

provide a first-class way, 13:47

that was provided by IE luckily, 13:49

to specifically target these browsers 13:52

with CSS styles that affect just IE7 and just IE8, 13:54

or a combination thereof. 14:00

It's tricky because that's provided for you for free 14:02

in the Boilerplate, 14:06

but I do think that you do want 14:08

to try as hard as you can to avoid vendor-specific styles. 14:10

A lot of times just setting explicit dimensions, 14:16

width and height, on an element will let you avoid 14:19

doing that, and so you should try and go as long as you can 14:23

without specifying specific browsers. 14:26

But it is there when you need it, and it helps a lot. 14:29

[Nick Pettit]: There's plenty more in Boilerplate 14:31

that we could talk about. 14:34

There's--I've heard you talk about 14:36

all the weirdness with carsets. >>[Paul Irish]: Yes. 14:38

[Nick Pettit]: There's Chrome Frame, Modernizr, setting the viewport, and so on. 14:40

What's your favorite feature, 14:45

and what do you think is the most interesting thing that's there? 14:47

[Paul Irish]: I found this on Ajaxian a long time ago, 14:50

and now on Stack Overflow there's a great question called, 14:54

'The Hidden Features of HTML.' 14:57

I submitted it a long time ago, and it's the highest voted, and it's in HTML Boilerplate, 15:00

and this is the protocol-relative URLs. 15:02

So, down at the bottom when we include jQuery, 15:05

we pull it in from the Google CDN, 15:07

but the script source is equal to 15:09

//ajaxgoogleapis.com stuff stuff, 15:12

and you're like, "I think you're--" 15:15

We get pull requests and bug reports on a monthly basis. 15:18

Like, "You got a typo, you missed the http:." 15:22

And we're like, "Actually, we didn't." 15:25

So, the protocol-relevant URL 15:28

provides an ability to-- 15:31

the browser will grab the HTTP version 15:33

when the page is in HTTP 15:37

and HTTPS when you're hosted in SSL. 15:39

This is cool because it guarantees 15:41

that the assets are requested securely 15:43

only when it's required. 15:46

There is a small overhead in requesting a secure asset 15:48

when you're in regular HTTP. 15:50

So, this is really cool 15:53

and helps, although it is a little tricky on Windows 15:55

when you're just developing, when you've loaded it up 15:59

from the file system and then in your browser it says, "file:," 16:02

it can be really slow. 16:05

If you use a local development server 16:07

however, you don't have that problem. 16:09

So, I think the feature is really awesome, 16:12

and that's probably one of my more favorite things. 16:14

[Nick Pettit]: It's crazy you brought that up 16:16

because I was just looking at that the other day 16:18

trying to figure out what happened here. 16:20

It's kind of amazing to me just how much 16:23

goes into a, supposedly, vanilla webpage. 16:26

I mean, it's called 'Boilerplate,' right? 16:30

So, it seems like it should only be the most basic things that you need, 16:32

but there's a lot there. 16:37

Do you think the job of a front-end developer has become 16:39

a lot more complicated in recent years? 16:41

And is that a good or a bad thing? 16:44

[Paul Irish]: Well, there's 2 things happening at the same time. 16:47

One of which is that age-old legacy browsers 16:50

are on the decline. IE6 is dead. 16:55

If you look at market share numbers, IE6 is dead. 16:58

IE7 has under--actually just about 1%. 17:01

IE is really strong but still 17:04

that's improving. 17:06

A lot of front-end developers' pain has been 17:08

the old browsers that haven't kept up 17:10

with not only fixes, but features that we want to use. 17:13

So, that part is getting easier. 17:17

By the same point, the last 3 years 17:19

have brought an enormous amount of features 17:21

to browsers that we now get to incorporate 17:24

and figure out the best way to incorporate. 17:26

So, for instance, if you're using a CSS transition, 17:29

do you use that CSS transition 17:33

and just let it fall back 17:36

if it's not supported by the browser? 17:38

I recommend you do. 17:42

But you could choose to feature detect it with Modernizr 17:44

and then use jQuery to animate 17:48

the same general transition. 17:51

So, figuring out your fallback scenario 17:54

is a little tough. 17:57

A little bit ago, a few of us put out a site called, 17:59

'HTML5 Please,' which aims to provide 18:01

a bit more guidance for all this stuff. 18:04

So, basically, you get to look up 18:06

for every feature, all the new stuff, 18:08

you get to look up exactly 18:11

what is probably the best way to handle this 18:13

for a cross-browser scenario, 18:15

where you might not have support everywhere. 18:17

Should you use a polyfill script to enable that feature in an old browser 18:19

or should you just let it fall back 18:23

or is there some in-between state that is probably the best way? 18:25

Finding that is tricky, but I think there's more and more resources out there that help. 18:29

[Nick Pettit]: It seems like this is something 18:33

that's unique to the nature of web development 18:35

where you have to come up with these fallbacks 18:38

for all of these different browsers coming out. 18:40

Do you think it'll always be that way, 18:43

or do you think we'll hit some point 18:45

where things are pretty stable, 18:48

and web development is just kind of a little bit more static? 18:50

[Paul Irish]: Well, so if we got there, 18:56

if we got to that point, that would essentially indicate 18:58

that there's not any 19:00

groundbreaking new features being added. 19:03

I kind of don't want to be there. Right? 19:07

At the same time, I don't like 19:09

having to send a bunch of polyfills 19:12

at older browsers 19:16

and just testing and worrying about that. 19:19

So,yeah, that's getting really complicated and messy, 19:22

and managing the various states, 19:24

like if you think about the old state of 19:27

all browsers must look--the experience must look the same in all browsers 19:31

to the new one which is we feature detect, we find out what we can provide, 19:34

and there's a lot of combinations of how your site looks. 19:39

Then you're like bringing responsive design, and it's changing. 19:42

So, from a capability and future perspective, it's different 19:45

from a viewport size; it's a different experience, 19:48

and when you've built a site, 19:52

and you're testing it to make sure that everything is right, 19:55

there's a lot of combinations to look through. 19:57

Here, the most important things are 19:59

choosing features to use where the fallback scenario 20:01

is you kind of forget about it. 20:05

If a browser doesn't have border radius CSS transitions, 20:07

that's probably okay. 20:10

A lot of these just kind of enhance. 20:12

The other part is 20:14

that I think we could actually, as a community, 20:16

do better to help encourage our users 20:19

to be using browsers that we specifically want 20:23

to support, and that helps our job, 20:26

and it helps them. 20:28

I know conversion rates improve significantly 20:30

when the experience is faster. 20:33

Helping your users be on the kind of browsers 20:35

that you yourself enjoy 20:39

actually has a good business support, 20:41

and is a lot more fun for users and developers, of course. 20:45

[Nick Pettit]: There's so many steps 20:49

that are involved in front-end development at this point. 20:51

This is something you were blogging about recently 20:54

where you said the tool chain is a little bit overwhelming. 20:57

There are so many steps and there are so many different 21:01

tools and techniques to deal with each one of them. 21:03

Do you think there's a need to simplify that 21:06

and try to bundle all of that together? 21:09

What are your thoughts on that? 21:12

Because I feel like the barrier to entry 21:14

is really high for somebody that's new to it. 21:16

[Paul Irish]: Yeah, so, it's tricky. 21:19

There's a lot going on, 21:21

and, yeah, it's a lot to absorb. 21:24

I've recently been working 21:26

with Addy Osmani 21:29

and some other people inside the web development community 21:32

to put out a project called, 'Yeoman,' 21:34

and this project is about putting together a lot of tools 21:36

that help you build better web apps. 21:39

Now, there's a lot going on in there, 21:42

but it's using things like CSS pre-processors, 21:44

live reload, 21:47

even shipping a plug-in for Sublime text. 21:50

So, there is like a baseline of features 21:53

that most front-end developers use, 21:56

and I don't think this is really listed anywhere. 21:58

Maybe I should make a blog post out of this, 22:00

but there's a few things that these days are pretty well accepted 22:02

as these are fundamental to development. 22:07

People don't talk enough to their colleagues, coworkers 22:10

about what is their process for developing. 22:14

How are they interacting 22:18

with their text editor, their source control? 22:23

I think there could be a bit more of a conversation 22:25

around what we can do to make sure that 22:28

when we're coming back to work on our projects 22:33

it's not frustrating and instead it's fun, 22:36

and I'm getting work done quickly. 22:38

Every time I watch someone else do their work 22:40

and I sit next to them and I'm like, "Whoa, whoa, whoa," 22:44

"What did you just do? What was that keyboard shortcut?" 22:46

[Nick Pettit]: Right. 22:48

{Paul Irish]: I think we should do a lot more of that. 22:50

[Nick Pettit]: Do you think it's okay for people to just use the stuff 22:52

and maybe not totally understand it but just know that, 22:55

"I need to do this thing for it to work?" 22:59

At what point does it just become an abstraction? 23:03

[Paul Irish]: I think it's--that's a great question. 23:06

So, right now-- 23:09

Nicolas Gallagher is the new project lead 23:12

on HTML5 Boilerplate. 23:16

He's kind of taken over, and he's doing a fantastic job. 23:18

So, his perspective is that 23:20

the Boilerplate project is aimed specifically 23:23

as a baseline--this is a baseline for web apps, 23:28

and it can be used for web apps and websites, 23:30

and there's not really much to take away, 23:32

and there's probably not much to add. 23:36

In fact, it's a very stable project 23:38

at this point because it's not trying to solve 23:40

Treehouse Friends

HTML5 Boilerplate and Front-End Development - with Paul Irish

Links

Related Discussions

Related Discussions