Placeholder Image

Subtitles section Play video

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

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

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

  • how would you describe yourself?

  • Who are you, and what do you do?

  • [Paul Irish]: I am a developer advocate

  • on the Chrome team right now,

  • and so I kind of focus on--that encompasses a lot,

  • but I focus on everything I can do

  • to make it better to create compelling content for the web.

  • We've got a lot of great content inside of Chrome.

  • I wanted to help educate people about that,

  • help people understand how to use things like

  • the Chrome DevTools better.

  • I also come with a big history of front-end development

  • and open-source projects that I work on

  • to help developers

  • learn what they need to know

  • to do better front-end development,

  • make better websites and web apps.

  • [Nick Pettit]: That's awesome.

  • You're involved in a million different projects.

  • You're doing Modernizr, HTML5 Boilerplate,

  • which I use all the time by the way.

  • You've been on the jQuery team,

  • and you've made all these really handy tools for

  • front-end devs.

  • This might seem obvious, but

  • what's the motivation for working on all these different things?

  • [Paul Irish]: I think part of it

  • is basically that I feel a lot of satisfaction

  • helping other people, and so part of it is just that.

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

  • is that I have a really bad memory,

  • and what that translates into is

  • if I don't write something down, I'll forget it.

  • So, this happened in front-end development where you learn this technique

  • of using media queries or the viewport meta,

  • and you need to keep track of this

  • because this is the right way to do it

  • in this situation.

  • So, that eventually translated into what became

  • the HTML5 Boilerplate project,

  • where a lot of best practices were distributed

  • all over on blogs and books and things like that,

  • and I was just like we need to get this together

  • just to keep track of it;

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

  • So, that's helped me a lot and has helped other people.

  • The other thing for me that really drives me

  • is that I want the web to be

  • where people build great things.

  • I'm just really excited about anything that I can do

  • to help make the web be a stronger platform

  • for making great, really cool stuff.

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

  • in tracking all of these different things?

  • [Paul Irish]: Because I can.

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

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

  • for time management right now.

  • I use a really cool tool called, 'WorkFlowy,'

  • which is like a super-enhanced

  • to-do method list app. It's really cool.

  • I set up priorities for myself

  • on a quarterly basis

  • and try and get them.

  • I think that's actually quite important,

  • which is to have a longer-term view of what you want

  • to attack, because it's so easy on a daily basis

  • to be totally distracted and

  • just be like, "I want to play with this new thing

  • and get it done. Oh, wow, something,"

  • and then you totally forget that you have this much larger,

  • higher-impact thing that you should be doing.

  • So, it's hard, and I'm still really bad at time management,

  • but I'm working on it.

  • [Nick Pettit]: I know what you mean.

  • With being involved with so many different projects,

  • I guess you kind of have to keep a big-picture view

  • as to what all those things are working towards.

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

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

  • and just get some of your history.

  • Where did you grow up and what were you into?

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

  • So, I'm from New England where we say,

  • 'wicked,' 'It's wicked cool.'

  • [Nick Pettit]: Wicked.

  • [Paul Irish]: I was into music.

  • I was in the marching band; I played the tuba.

  • I was into drama. So, I was a band and drama kid in high school.

  • I was really into music and, in fact,

  • the first time that I really got going online was

  • I created a music blog.

  • This was in--I put it out in 2004,

  • and I thought I was so late to the music blog scene,

  • but it turned out that I was one of the first 50 or so.

  • Having that environment where I had a website that had a lot of traffic,

  • and I could play with the design and experiment

  • and get a lot of feedback

  • on how people liked it,

  • that was one of the first times when I was really like,

  • This front-end development thing is a lot of fun.

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

  • [Paul Irish]: That was when I was like,

  • this could definitely be full time.

  • I'd been playing with websites.

  • Back when IE4 came out

  • they did this really cool marketing campaign.

  • This was when the DHTML term arrived,

  • and so they had this marketing campaign

  • where they rented out all these movie theaters across the U.S.

  • and invited a bunch of developers,

  • and I went and I got free popcorn and a free t-shirt

  • and a free Windows 95 install CD,

  • and they showed about what you could do in IE4,

  • and it was amazing.

  • So many great features came out then,

  • and so that was when I was like,

  • this interest of mine, there's cool stuff in here.

  • Eventually, it quieted down.

  • I went to college, but after that everything picked back up again.

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

  • [Paul Irish]: I went to school for--

  • I got a degree in technical communications.

  • I don't actually know--

  • I really do wish that there was more university-level coverage

  • for web development.

  • Front-end development is hard, and it's a pain,

  • and I wish that there was a more sophisticated education

  • program for this.

  • I got education in computer science and mathematics,

  • and management and communication.

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

  • I'm interested to know if

  • you feel like your degree really helped you

  • in your career, or--?

  • [Paul Irish]: Mine did,

  • and I think these days having a computer science background

  • has a very direct effect.

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

  • but nowadays, especially on the client side,

  • there's so much logic there.

  • You're writing jQuery, things are going good,

  • you're translating, you're writing larger applications.

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

  • A background in computer science lays a lot of the groundwork

  • so that you're not making stupid mistakes

  • and taking 4 months to learn how you should have done things.

  • So, yeah, computer science has a big influence

  • on where the trajectory

  • of front-end development is going for sure.

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

  • that's facing people coming out of college today

  • is how to make the transition to

  • a career and not just kind of hopping from job to job

  • or being unemployed.

  • How did you make that transition?

  • Were you just kind of in an internship,

  • and it was a really natural progression

  • or did you--?

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

  • some marketing for

  • a stationary company

  • that made wedding invitations and birth announcements,

  • and I wasn't even starting out with web stuff.

  • I was creating

  • a mail-merge Word document,

  • and then we were using that to fax blast all of our customers,

  • and I was customizing the mail merge to be

  • depending on the customer, and it was all this logic inside Word.

  • It was awesome.

  • That transitioned, within that job,

  • into working on their e-commerce presence,

  • and so that was good.

  • I think for most people

  • having something you can develop on your own--

  • In my case I had my music blog,

  • but I think having your own web presence,

  • whether it's a blog; I think blogging is really good.

  • Blogging what you're learning is extremely smart

  • and having that place where you can iterate and play around.

  • So, when you see a new feature come out,

  • like you're reading a site and they talk about some new CSS3 feature

  • or something, make a demo with it.

  • Kind of explore it.

  • Put it up on CodePen.

  • There's a lot of communities now that are encouraging

  • and let you explore things, get feedback.

  • Having a social community

  • that you can talk to and explore

  • your own professional development with.

  • I had one, and it's just been very--

  • It's a very smart way to go about things.

  • [Nick Pettit]: So what first attracted you to

  • front-end development, specifically?

  • Because you were making a blog, did you do that in WordPress or something?

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

  • Why aren't you, say,

  • like a Ruby or a PHP developer, for example?

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

  • is that you're building the interface,

  • and not only are you building the interface,

  • and you can make decisions around

  • how the interactions are,

  • but you're also getting feedback from its users

  • and from the customers.

  • The thing that they're touching, their cursor is going over

  • what you've created, and you're in a position

  • to where you can define the style of interaction

  • and the quality of the user experience.

  • Other people can work on how fast it responds

  • and a really strong infrastructure,

  • but the UI is just very sexy to me.

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

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

  • I'm creating the interface, they're using it,

  • they can love it, they can be delighted by it.

  • Or they can hate it when I apply

  • a lot of text shadow to it and make it hard to read or something.

  • [Nick Pettit]: Sure, sure.

  • So, I want to talk about HTML5 Boilerplate for a little bit,

  • because I'm personally interested in it.

  • I think it's a really amazing project

  • for people that are just starting out

  • in web design and web development,

  • and I think there's a lot more that goes into it

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

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

  • [Paul Irish]: Before working for Google,

  • I was at an agency in Boston making websites, web apps.

  • We had a big team of front-end developers there,

  • and when I was going from project to project,

  • I was noticing that I was pulling lines of code

  • from my markup and from my CSS

  • from my last one into my new one,

  • and then I was like, well, I should probably make a template

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

  • That's the original genesis, was just

  • that I needed to keep track of all this stuff

  • and move it forward from project to project.

  • Soon after, I got Divya Manian involved.

  • We put out a 1.0 just to see what everyone else thought.

  • Immediately it was really great

  • because inside HTML5 Boilerplate

  • is a bunch of techniques, right?

  • One of the things that has continued up until a little bit ago

  • is having inline documentation.

  • You see a technique, and you can instantly see

  • the website where that was birthed,

  • and someone can justify exactly why this is important.

  • So, it's kind of serving as an education tool.

  • You've kind of got to understand why everything is in here.

  • So, what happened is we put this out there,

  • and immediately we got a lot of feedback

  • over on GitHub where we open-sourced.

  • A lot of people coming in and being like,

  • Actually, I see what you're doing here,

  • but if you tweak it, this is a much stronger position.

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

  • Every character inside HTML5 Boilerplate

  • has had a lot of discussion around it,

  • and so everything that you see is the result

  • of extensive conversations that have included

  • some of the best front-end developers in the industry.

  • You can go and look back at all those past conversations

  • in the old issues on GitHub.

  • The commits in the project,

  • the log messages have very desciptive

  • explanations of why we're doing this.

  • It's very well-justified in why all these decisions

  • are very strong as a baseline for starting your web project.

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

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

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

  • "What's all this weird code?"

  • Let's talk about that a little bit.

  • From the top, what are all those IE conditional comments,

  • because that's the first thing people see?

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

  • they don't look great.

  • They look kind of nasty.

  • It's like sometimes you want your mark-up to look

  • svelt and sexy and minimal,

  • and I love doing that as well.

  • Inevitably when you're developing--

  • So, this is not a problem for IE6 and IE7,

  • which have no market share anymore.

  • IE8's definitely still around,

  • but it's been a case where

  • they have actual CSS bugs in their implementation,

  • and you can use CSS hacks,

  • like syntax hacks, to target them and change the width or something,

  • and change the padding

  • to make your layout work and to fix those bugs.

  • But using undocumented CSS hacks,

  • it doesn't allow you to communicate well with your team,

  • and when you're working in a group

  • you want everyone to read the code and understand.

  • So, the conditional comments

  • provide a first-class way,

  • that was provided by IE luckily,

  • to specifically target these browsers

  • with CSS styles that affect just IE7 and just IE8,

  • or a combination thereof.

  • It's tricky because that's provided for you for free

  • in the Boilerplate,

  • but I do think that you do want

  • to try as hard as you can to avoid vendor-specific styles.

  • A lot of times just setting explicit dimensions,

  • width and height, on an element will let you avoid

  • doing that, and so you should try and go as long as you can

  • without specifying specific browsers.

  • But it is there when you need it, and it helps a lot.

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

  • that we could talk about.

  • There's--I've heard you talk about

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

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

  • What's your favorite feature,

  • and what do you think is the most interesting thing that's there?

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

  • and now on Stack Overflow there's a great question called,

  • 'The Hidden Features of HTML.'

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

  • and this is the protocol-relative URLs.

  • So, down at the bottom when we include jQuery,

  • we pull it in from the Google CDN,

  • but the script source is equal to

  • //ajaxgoogleapis.com stuff stuff,

  • and you're like, "I think you're--"

  • We get pull requests and bug reports on a monthly basis.

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

  • And we're like, "Actually, we didn't."

  • So, the protocol-relevant URL

  • provides an ability to--

  • the browser will grab the HTTP version

  • when the page is in HTTP

  • and HTTPS when you're hosted in SSL.

  • This is cool because it guarantees

  • that the assets are requested securely

  • only when it's required.

  • There is a small overhead in requesting a secure asset

  • when you're in regular HTTP.

  • So, this is really cool

  • and helps, although it is a little tricky on Windows

  • when you're just developing, when you've loaded it up

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

  • it can be really slow.

  • If you use a local development server

  • however, you don't have that problem.

  • So, I think the feature is really awesome,

  • and that's probably one of my more favorite things.

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

  • because I was just looking at that the other day

  • trying to figure out what happened here.

  • It's kind of amazing to me just how much

  • goes into a, supposedly, vanilla webpage.

  • I mean, it's called 'Boilerplate,' right?

  • So, it seems like it should only be the most basic things that you need,

  • but there's a lot there.

  • Do you think the job of a front-end developer has become

  • a lot more complicated in recent years?

  • And is that a good or a bad thing?

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

  • One of which is that age-old legacy browsers

  • are on the decline. IE6 is dead.

  • If you look at market share numbers, IE6 is dead.

  • IE7 has under--actually just about 1%.

  • IE is really strong but still

  • that's improving.

  • A lot of front-end developers' pain has been

  • the old browsers that haven't kept up

  • with not only fixes, but features that we want to use.

  • So, that part is getting easier.

  • By the same point, the last 3 years

  • have brought an enormous amount of features

  • to browsers that we now get to incorporate

  • and figure out the best way to incorporate.

  • So, for instance, if you're using a CSS transition,

  • do you use that CSS transition

  • and just let it fall back

  • if it's not supported by the browser?

  • I recommend you do.

  • But you could choose to feature detect it with Modernizr

  • and then use jQuery to animate

  • the same general transition.

  • So, figuring out your fallback scenario

  • is a little tough.

  • A little bit ago, a few of us put out a site called,

  • 'HTML5 Please,' which aims to provide

  • a bit more guidance for all this stuff.

  • So, basically, you get to look up

  • for every feature, all the new stuff,

  • you get to look up exactly

  • what is probably the best way to handle this

  • for a cross-browser scenario,

  • where you might not have support everywhere.

  • Should you use a polyfill script to enable that feature in an old browser

  • or should you just let it fall back

  • or is there some in-between state that is probably the best way?

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

  • [Nick Pettit]: It seems like this is something

  • that's unique to the nature of web development

  • where you have to come up with these fallbacks

  • for all of these different browsers coming out.

  • Do you think it'll always be that way,

  • or do you think we'll hit some point

  • where things are pretty stable,

  • and web development is just kind of a little bit more static?

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

  • if we got to that point, that would essentially indicate

  • that there's not any

  • groundbreaking new features being added.

  • I kind of don't want to be there. Right?

  • At the same time, I don't like

  • having to send a bunch of polyfills

  • at older browsers

  • and just testing and worrying about that.

  • So,yeah, that's getting really complicated and messy,

  • and managing the various states,

  • like if you think about the old state of

  • all browsers must look--the experience must look the same in all browsers

  • to the new one which is we feature detect, we find out what we can provide,

  • and there's a lot of combinations of how your site looks.

  • Then you're like bringing responsive design, and it's changing.

  • So, from a capability and future perspective, it's different

  • from a viewport size; it's a different experience,

  • and when you've built a site,

  • and you're testing it to make sure that everything is right,

  • there's a lot of combinations to look through.

  • Here, the most important things are

  • choosing features to use where the fallback scenario

  • is you kind of forget about it.

  • If a browser doesn't have border radius CSS transitions,

  • that's probably okay.

  • A lot of these just kind of enhance.

  • The other part is

  • that I think we could actually, as a community,

  • do better to help encourage our users

  • to be using browsers that we specifically want

  • to support, and that helps our job,

  • and it helps them.

  • I know conversion rates improve significantly

  • when the experience is faster.

  • Helping your users be on the kind of browsers

  • that you yourself enjoy

  • actually has a good business support,

  • and is a lot more fun for users and developers, of course.

  • [Nick Pettit]: There's so many steps

  • that are involved in front-end development at this point.

  • This is something you were blogging about recently

  • where you said the tool chain is a little bit overwhelming.

  • There are so many steps and there are so many different

  • tools and techniques to deal with each one of them.

  • Do you think there's a need to simplify that

  • and try to bundle all of that together?

  • What are your thoughts on that?

  • Because I feel like the barrier to entry

  • is really high for somebody that's new to it.

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

  • There's a lot going on,

  • and, yeah, it's a lot to absorb.

  • I've recently been working

  • with Addy Osmani

  • and some other people inside the web development community

  • to put out a project called, 'Yeoman,'

  • and this project is about putting together a lot of tools

  • that help you build better web apps.

  • Now, there's a lot going on in there,

  • but it's using things like CSS pre-processors,

  • live reload,

  • even shipping a plug-in for Sublime text.

  • So, there is like a baseline of features

  • that most front-end developers use,

  • and I don't think this is really listed anywhere.

  • Maybe I should make a blog post out of this,

  • but there's a few things that these days are pretty well accepted

  • as these are fundamental to development.

  • People don't talk enough to their colleagues, coworkers

  • about what is their process for developing.

  • How are they interacting

  • with their text editor, their source control?

  • I think there could be a bit more of a conversation

  • around what we can do to make sure that

  • when we're coming back to work on our projects

  • it's not frustrating and instead it's fun,

  • and I'm getting work done quickly.

  • Every time I watch someone else do their work

  • and I sit next to them and I'm like, "Whoa, whoa, whoa,"

  • "What did you just do? What was that keyboard shortcut?"

  • [Nick Pettit]: Right.

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

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

  • and maybe not totally understand it but just know that,

  • "I need to do this thing for it to work?"

  • At what point does it just become an abstraction?

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

  • So, right now--

  • Nicolas Gallagher is the new project lead

  • on HTML5 Boilerplate.

  • He's kind of taken over, and he's doing a fantastic job.

  • So, his perspective is that

  • the Boilerplate project is aimed specifically

  • as a baseline--this is a baseline for web apps,

  • and it can be used for web apps and websites,

  • and there's not really much to take away,

  • and there's probably not much to add.

  • In fact, it's a very stable project

  • at this point because it's not trying to solve

  • other problems.

  • Now, let's say in jQuery, for instance,

  • this has been a longtime question

  • which is, "Should I learn JavaScript at the same time as I learn jQuery?"

  • "Should I learn it first?"

  • My answer to that has always been

  • you learn them at the same time,

  • especially things like math and strings and array methods.

  • You want to learn those JavaScript methods fairly quickly,

  • because there are not good answers for them in jQuery.

  • At the same time, you don't want to have to learn

  • how a lot of the intricacies of the DOM work

  • very early on.

  • So, I think it's a matter of

  • learning the techniques as you're using the tools.

  • So, in HTML5 Boilerplate,

  • you kind of dig into some of the documentation,

  • and at some point you'll just be like,

  • "Why?" And you should be asking that question.

  • That shouldn't preclude you from using the tool.

  • At the end of the day, you want to enjoy what you're doing,

  • and you want to do it fairly quickly,

  • and you don't want to be frustrated.

  • So, you use the tools that are available.

  • I think it's important to understand how they work,

  • and right now I'm trying to get a better understanding

  • how browsers work, and those are really complicated.

  • But I'm not going to tell everyone that every web developer

  • needs to understand how all of the web browsers work.

  • I think we're okay with that kind of working as a tool.

  • It's a balance.

  • Understanding the internals of any tool

  • will help you be much stronger at using it,

  • but you don't need to understand it

  • to use it.

  • [Nick Pettit]: So, wrapping up, what advice would you give

  • to web designers and developers out there,

  • just as a very general question?

  • [Paul Irish]: Sure.

  • [Nick Pettit]: What can they do to better themselves?

  • [Paul Irish]: One of the things that happened to me

  • a while ago was,

  • I had joined the jQuery IRC channel.

  • So, IRC is kind of, it seems nerdy.

  • Yeah. Nick's like, "Yeah, definitely nerdy."

  • But I joined that a long time ago,

  • and I was just super active in it, and that's how I got involved

  • in jQuery projects, started doing developer relations for jQuery,

  • joined the jQuery team, was involved in the project for a long time,

  • and it was all because I joined the IRC channel

  • and just started talking to people and helping people.

  • So, helping other people with

  • front-end development

  • you learn a lot, and I would recommend that.

  • The same time that that happened,

  • I found a group of people that were

  • doing a bunch of jQuery, doing a bunch of JavaScript,

  • and we just formed this kind of social group

  • of 20 of us.

  • It was also on IRC, and we would just talk all the time

  • about what we were doing,

  • and this led to--there was a little bit of competitiveness,

  • but a lot of cooperation.

  • We would work on projects together,

  • things like MovetheWebForward.org

  • and HTML5 Please, have come out of this group.

  • So, having--

  • So you're not alone without a mentor.

  • It's great to have a social group

  • where you don't feel like completely inferior to everyone around you

  • and can kind of support each other.

  • The last part of this is really just to

  • be able to have fun while you're learning.

  • I think part of that is

  • creating little demos and experiments for yourself.

  • Doing that will give you more experience with cool features

  • and things that you want to explore

  • and help you feel more confident when you

  • propose to your boss, "Really we should do it this way,"

  • "Why? Why?"

  • And you'll be like, "Well, I've actually done some work with this,

  • and it's not as bad or as scary as you think,

  • and, I don't know, it'll all work out."

  • [Nick Pettit]: That's the advice that I always give to people

  • is just, "Do cool stuff and share it with other people."

  • [Paul Irish]: Yeah, absolutely.

  • [Nick Pettit]: Awesome. Well, thanks so much for being here. I really appreciate it.

  • [Paul Irish]: Cool, thanks.

  • [Treehouse FRIENDS]

  • [♪music playing♪]

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

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it