[MUSIC]

[INAUDIBLE] I happen to really love tools,

and tools are kind of amazing, because, they help bring our ideas to fruition.

Regardless of whether you're a geek, tearing up a

box, and using a glue gun, and some celltape.

To make the most awesome helmet ever, or a JavaScript developer

building a really complex app, or a designer building a website.

Today we're gonna take a look at how

to improve your developer productivity and happiness during development.

And there are tons of tools that can really help

with this, and I hope that, you, you'll be able

to get at least a little bit out of this

talk that's gonna help you with your day to day workflow.

Speaking of tools, so,a little bit about me

if you have any comments or questions during

the talk at all, comments, questions, viagra spam,

please feel free to hit me up on Twitter.

For the one person in the audience probably

using Google Plus, I'm on there as well.

We have a little party every time someone joins, so I'm on there.

So the other day I was trying to install a tool.

Reece knows what I'm talking about.

So I was trying to install a tool,

and it automatically started installing Java for me.

Now when you start installing Java these days, it actually has this big thing

that shows up saying that there are three billion devices that run Java now.

That's fantastic!

Unfortunately, there are also 14 million people in the

world that have syphilis, but I don't want that.

[LAUGH]

I totally stole that joke off of Bruce, who is the friendliest guy ever.

Sometimes he's a little too friendly, but, we won't talk about that.

[LAUGH] These things come back to bite you sometimes.

I don't, I don't really hate Java.

Sort of.

Sort of is one of those phrases that don't really mean anything.

Like, it, you know, it works cross browser or

it doesn't use flash, or it's a boy, sort of.

I live over in Greenwich, well the Royal Borough of Greenwich.

The queen wouldn't really be seen dead here, but if

you go check us out on Google Maps and you

look at street view, you'll eventually find that there are

two guys battling to the death using swords, for some reason.

I can only imagine that they're having some

sort of web versus native battle to the death.

I don't know what's going on here.

I love experimenting.

I love experimenting with new tools and new ideas.

The first time I tried to experimenting some, with something

was a few years ago when I was on Wikipedia.

And I thought I'd be really smart and

actually try Wikipediaing what Wikipedia actually means on there.

And so I went to the site and I started typing it out.

And you know what it said?

It said I was an asshole.

[LAUGH] This edit is far-gone.

But, you know, never be afraid to actually poke at things and find out how they work.

You'll learn quite a lot in the process.

So, trying to develop for the web today, is a little bit

like trying to do your taxes in the middle of some amazing party.

It's getting more and more complex as time goes by.

Our tooling landscape is getting more complex.

There are more and more things that we

wanna be able to use on a day-to-day basis.

Now, this is what, this is roughly what the tooling landscape looks like today.

We're having to use boilerplates, frameworks, abstractions.

Things that generate our documentation.

Things for our build process.

Continuous integration, version control, and so on.

If you're a beginner, this is basically what the situation looks like.

You're just put off.

It's really scary, it's really daunting.

But luckily there are things we can do to actually assist with

this regardless of whether you, you know, you're just starting out in

the industry, or you've been a veteran and you've been doing this

stuff for a long time and you're hacking away on the command-line.

Now the first rule of tooling, is thou shalt not make Paul Irish cry.

I promised him I, would try to make sure I didn't do that.

And the second, is that you should

only choose tools that you're gonna actually use.

It's very, very easy to, you know, see on Hacker

News or on Twitter that something is the next biggest thing.

And you have to be using it.

But if it's not gonna be practically useful to you, you know, there's

no need, need for you to go and invest time in using it.

Just, make sane choices there.

Now, regardless of what you do, time is a

really key factor in being able to stay productive.

We've got so many distractions today and we, we really, ideally just wanna be able

to focus on the logic for the apps we build and the sites that we build.

What are you able to do to save yourself time?

Other than putting a baby into a sink?

I mean, that's just not right.

Try to automate those repetitive tasks that you find yourself doing every

day, and there are a ton of ways that you can do this.

I'll, I'll show you some tools to help with this a little bit later.

But doing that will help you stay effective, it will

help you make sure that you're as productive as possible.

This has been done in lots of other industries over the past 50 years.

It's been done in the car manufacturing industry for example.

Where rather than manually putting together

machinery it's all done by machines now.

Now automation, you know, it sometimes gets a, a bad you know, bad rating.

People think that it's all about you getting lazy, but it's not.

It's about you trying to get efficient.

Efficiency could look like this.

You know, it could be you sitting down on your couch, and being lazy as fuck.

But, you know, I believe that the right tools

make the difference between an artist and a craftsman.

It's the difference between the person that can go and start off in a

new project in 50 minutes, and the person that can do that in five.

Now you, you wanna be the person that can do that in five,

because it'll mean that you can spend more time actually building something amazing.

So this is what the average front end workflow looks like today.

We usually start off with some sort of set up.

We scaffold out.

We might, you know, go pick out a boilerplate of some sort.

If you're a beginner, you're probably using jQuery.

And maybe you're gonna go and use jQuery boilerplate.

Or if you're building an app, maybe an angular boilerplate of some sort.

You'll go and you'll download libraries, download templates, download frameworks.

And this is sort of a process that we

repeat every time we're working on a new project.

This is something that we could probably automate.

We then go onto the development phase,

where increasingly people are using Watch tasks.

Now a Watch task will basically watch a set of files or a single file for changes.

And go and run some process once it's completed.

So, that's something like you know, using a preprocessor like Sass or Less or

Stylus, and it going and actually compiling

your source files into CSS for you.

Or whether, you know, regardless whether you're

using CoffeeScript or Jade or, or other abstractions.

Another thing people are using a lot more these days, is the concept of LiveReload.

Where you're able to have your editor and the browser side by side.

And, in real time get, you know, a view of the state of the application.

So, you make a change and you're able to have the browser

refresh, to show you where you're at, and how things actually look.

And then we've got, increasingly, tools for linting your CSS

and linting your JavaScript, which you should be using by default.

And then we've got the Build step.

Now, builds are really interesting, because

they vary massively from project to project.

There are few things that we, we all do.

I mean things like, you know, minifying CAT [UNKNOWN] our CSS and

our scripts, running our unit tests,

code lensing, trying to optimize our performance.

There's a lot of stuff in there.

Now the good news is that, you know, you can automate

a lot of this, for both simple projects and more complex projects.

Let's talk about how we can do this for simple

projects, which will hopefully be good news for some people.

Now there are a number of tools that have been, you know, coming

out over the past year or two to help with this kinda thing.

CodeKit is fantastic for this.

It's been around for ages, it's probably the

longest living sort of desktop tool for the Mac.

To assist with workflow.

But it can do many of the things that we just talked about.

There's also other options like Hammer.

Which tries to take a sim, similar approach but on this more with templates.

So you can actually get started with building sites more easily.

For people on Windows.

Now I'm gonna stop very quickly and say that a lot of the time when

we're talking about modern front end tooling, we

focus too much on tools that are just

available for the Mac, but people using Windows,

and I know there are tons of people

using Macs here, I'm using a Mac, but

people developing Windows, are equally as valid developers.

And so I'm gonna try giving you sort

of Windows equivalence for anything that I mention today.

So Prepros is something that I noticed does the exact same thing as CodeKit.

It also happens to be free, and it's also available for the Mac.

So if you wanna go check that out please feel free to.

They've got a pro version as well, but, it helps you with

your, you know, day to day

workflow working with preprocessors and and abstractions.

Another option if your on Linux, because again we

tend to ignore people working on Linux, is Koala App.

Now, I believe this is also free, but, it gives you, once again, a similar

workflow where you can say well here's a

directory I'm working on please go and figure

out, you know, what abstractions I'm working, I'm

using, and, and connect up the tools that

need to compile those things into my final files that I can preview in the browser.

And, tools like this can actually be

really helpful for your day to day workflow.

Mixture.io is another tool which takes the concepts that these other

tools like Hammer and CodeKit and introduce and takes them further.

So it introduces this concept of of prototyping with boilerplates.

So if you wanna get started on a

project with Twitter Bootstrap or Foundation or something else.

You can use Mixture and it's available for Windows.

It's available for the Mac.

But it gives you a lot of the things you wanna be using.

Things like your LiveReload.

Things like your abstraction compilations.

It's really, really cool.

For people who don't feel that they want additional tools to help with, sort

of a broader workflow, there are more focus tools that can help with this stuff.

Things like CompassApp.

Which will help you just avoid having to go

back and forth between the terminal and your editor.

It can just be running in the background, taking care of compiling your Sass.

Things like Scout App, which do something similar.

This is available for, for Windows and the Mac.

But you'll see that there are actually quite a lot

of tools that can help with your workflow on the desktop.

I believe in iterative improvement, so even if you're someone that decides

to go and use one of these desktop tools today, that's fantastic.

Doesn't mean that you can't be someone that's

hacking on the command-line to automate your workflow tomorrow.

And the way that I look at this is first do it, do it right, then do it better.

And the basic idea is that you iterate on how you improve your workflow.

One step at a time, you're improving your productivity.

And your ability to just jump straight into

a new project, and actually start writing some code.

Rather than worrying about those

boilerplates, and setups, and abstractions.

Much of what I develop.

You know, some people have a perception that it looks like this.

The reality is, a lot of it actually turns up like this.

I'm not ashamed to say it.

It looks pretty in some people's eyes.

But what would be better than using these desktop tools?

What would be better is the ability to actually

automate our workflow for any type of project, regardless

of how complex it is, regardless of how many

people are working in our team, and so on.

And so, one possible solution to this, is a

set of tools we've been working on, called Yeoman.

Now Yeoman is composed of three main tools: Yo, Grunt, and Bower.

And each of these tools is worked on by different teams, but we all share

the same common goal, of trying to help

you become more productive on the front end.

Now you can scaffold out new applications and new sites using Yo.

You can build, preview, and test your projects using Grunt, and you can

manage your dependencies using Bower, which is

a new package manager for the web.

Let's take a look at these in a little bit more detail.

But what they give you, is basically the

flexibility to customize your project and your build setup.

As much as you want.

You can choose whatever dependencies you

wanna use, and have them automatically managed.

You can choose whatever boilerplates you wanna use, without having

to go back and forth manually fetching them from a site.

You can limit the time you're spending writing boilerplate.

There's actually a vast amount of options

available now for scaffolding out projects using Yeomen.

And in general, you can improve your productivity,

and delight whilst trying to develop a new app.

So let's take a look at Grunt which Jack Franklin

is gonna be covering in a little bit more detail tomorrow.

So Grunt is a task runner, and it basically helps you run repetitive tasks.

So any of those things that we were talking about before at build time.

Things like your linting, your compilation,

testing, being able to generate assets.

Being able to, you know, generate documentation from your code.

It's able to help with all of these things.

And you can consider it an alternative to rake, cake, make, ants, there's

so many different options that people have been using for the past five years.

But to give you an idea of how much Grunt is

making a difference, over at Google on the Google Docs Team,

we recently also had had one of our sub teams that

were using all four of these options, switch up to using Grunt.

And it's now extremely easy for them to introduce anything, any other steps

into their workflow that they need with barely any effort, it's quite amazing.

They also saw some nice performance games in, in

the amount of time it took to build projects.

Now one of the really nice things I like

about Grunt, is that it has a huge plugin ecosystem.

So, you'll find that there's barely any task that you can

think of, that there isn't already a Grunt task written for.

And it's actually quite easy to write your own Grunt tasks.

I'll show you a Grunt task that I've been hacking on in a few minutes.

Grunt's fantastic for those who are developers, if

you're a designer, it's great for you too.

It actually has a minimal amount of set up that's required.

And there's really just two, two files that you

have to worry about, when you're working on Grunt.

There's a package.json file, and a Grunt file.

Now your package.json, file basically just contains a list of

Grunt plugins that you wanna use, as well as some metadata.

So, here you'll see that in the dependencies object within this file.

We have something that says, okay well, a specific version of Grunt is being used.

And I also want to include these two Grunt tasks.

Now the tasks are

called, grunt-contrib-jshint and grunt-contrib-uglify.

The contri part of this of this naming, actually

means that, the Grunt team themselves maintain that task.

And it means that you can generally assume,

it's gonna have fantastic documentation, great tasks, great support.

It doesn't mean, that you know, tasks written

by other people aren't gonna have those things, but,

it's just something that's, you know, it's nice

to know when you're starting off a new project.

And then you have your Gruntfile, which is

like a, a command center for everything going on.

And this is where you configure your tasks and you load in plugins.

So here, inside our Grunt initial configuration,

I have an object configuring my uglify

task, which is going to be able to handle things like minification of my scripts.

And all I'm saying is, for a target I'm calling Build.

And I can have lots of targets, I can have a target

for my development environment, where I'm just, you know, trying out things.

Another for my final production environment.

For that, I'm just specifying a source for where

I want it to go and look for my scripts.

And another where I want it to actually put the minified files.

It's simple enough.

And then we have some configuration for JSHint, now you can configure this as much

as you want, but, this is probably

the simplest amount of configuration you can specify.

Go and lint all of the all of the source files, in my project, and it'll do it.

At the bottom of this file we have three lines.

We have two lines at the top that include the words loadNpmTasks, which

will basically just load the tasks that you specified in your package.json file.

So, they can actually be used at the

command-line, and then we have another thing called registeredTask.

And this is a way of you grouping a number of different operations together.

Now in general, you'll see people have default task, a builD task.

And those will just sort of string together a number of different operations.

So things like your linting, your compression, and so on.

Now you install Grunt on the command-line using NPM, the Note Package Manager.

NPM doesn't actually stand for Note

Package Manager, it apparently stands for NPM.

I'm not sure how that works, but, there you go.

And then you npm install inside of your project to basically go and fetch any

of the dependencies that your Grunt tasks

need, as well as the Grunt tasks themselves.

And then when you run Grunts, it'll just go and run

those tasks inside of your project, and hopefully everything will pass okay.

If it doesn't, you'll get some feedback inside the terminal,

and you can go, and you can address those issues.

It's not too bad.

To install custom Grunt tasks, again you do this via command-line, you just run npm

install, generally speaking it's Grunt as for

the namespace, followed by the name of the

task, and you just pass in save dev at the end, to make sure that

it's saved to your package.json file, so you

don't have to manually wire that up yourself.

Now, there's some really fantastic Grunt tasks that I've been

using over the past few weeks, that I strongly recommend.

Now, increasingly, we're finding that the devices our users

are using, are not a laptop, it's one of these.

Now there's a few of different problems with these devices, mobiles.

They're using slower GPUs, slower CPUs, and our users

could potentially be using network connections which are quite slow.

Now, that's interesting because if you think about it according to

the HTTP archive, the average web page size is now 1.5 megabytes.

That sounds like a lot, and, what's even more

surprising is that most of that is actually images.

And so, having a strategy for optimizing images and, and over the

next year having a responsive images strategy Is gonna more and more important.

Now, Grunt responsive images.

I have set up bit.ly links for all this stuff.

You can check it out later.

Check it out now.

Grunt responsive images will actually just take a, a directory of images inside your

project, and it'll go and generate multiple

resolutions of them, for you, and so if

you, if you are, you know, if you happen to have a strategy in place

whether you are using SourceSet or a

polyfill library of some sort of a SourceSet.

You can actually say, okay, well if you're on a mobile

device, send me down a smaller picture with a [UNKNOWN] smaller size.

And that's a little bit more optimal.

So I love Grunt responsive images.

Now, because we're trying to keep our page weight

down as much as possible, I also love grunt-contrib-imageoptim.

Now this is a Grunt task, again run by the Grunt team and it's maintained

by the Grunt team, it's had a lot of input from the image processing community.

And it does a fantastic job picking out the best tools that are

available at the moment, for optimizing your JPEGs, your PNGs, your animated GIFs.

Absolutely everything.

So I'd check that out as well.

Now for people who might already be using Grunt, there are

two speed tips that I've got that you'll, you'll really, really appreciate.

The first is called grunt-concurrent.

Now this is a grunt task which will actually allow

you to run in parallel multiple tasks at the same time.

Now, they're gonna be some tasks things like, you know, compiling your

Sass and compiling your CoffeeScript, which

don't necessarily rely on each other.

And so, it actually makes sense to run these things in parallel.

And I've actually seen some teams I know that, TweetDeck

in the U.K. are currently looking at this stuff as well.

I've actually seen some teams manage to improve their build times by

anywhere up 60 or 70%, just dropping in this task and using it.

So check out grunt-concurrent.

Now grunt-newer is another useful speed speeding tip.

And what this does is, it, after you make, you know a first build of your project.

Let's say that, you know, maybe you're you know, maybe

you're using abstractions, maybe you're using a preprocessor and so on.

Maybe you're just, you know, concatenating and,

and minifying your scripts and, and styles.

Let's say that you've run that build one time.

Now, the next time that you run it, they're

gonna be some files that you haven't actually changed.

You may have actually changed one file.

And what grunt-newer will do, is it's only going to

run tasks against the files that changed since your last build.

And I've seen people get anywhere up to 40%

improvements in built time just by dropping this in.

It actually has a minimal amount of configuration required.

Now, this is sort of the first time I'm talking about this.

I've been hacking on this for the past few weeks.

This is a new Grunt task, called grunt-uncss, and, it's one of the

first Grunt tools that will allow you to remove unused CSS from your projects.

You can check it out at bit.ly/uncss, but, a few weeks ago

I saw the DNL Mayor had this tweet, where he said, you

know 1,186 rules of CSS are not being used by this current

page, when Bootstrap is used for convenience in overkill mood, mode sorry.

But, basically what he's saying is, that

most people are dropping, you know, things like

Bootstrap in to their projects, of any large

monolithic UI Framework, tend to not really realize.

The cost of using that in the long term, and

how much of it they're actually not using on their pages.

And I thought, that would be a really interesting problem to try automating.

Now what Dion was talking about, this this thing at the very top where he says 90%,

91% of CSS not used, is some output

that comes out of the Chrome DevTools Audits panel.

So the first thing you can do is, if, if you think that you have

and issue with too much unused CSS in your project is to go to the

Chrome DevTools, open up your page or your site, and go the the audits panel, start

recording, and it'll tell you how much unused CSS you have, in the current page.

So here you can see it says, you know, remove unused CSS tools at

the very bottom, 89% of CSS is not used by the current Bootstrap page.

Great.

So what my task does is let's say that you have a page using Bootstrap.

Or it could be your own in house UI framework.

Here's a multi page Bootstrap page I'm just going and I'm

running Grunt cuz I've configured it to use my new task.

And once it's completed running, I'm just gonna

go over to the production version of this site.

And as you can see, it looks the exact same.

I can actually go between multiple pages and it looks identical.

But the difference between what we had before

and what we have now, is quite astounding.

If we check out the total size of the CSS

in our original application, we see that it's 288 kilobytes.

We go and check this out, for the new build, and it's down to 40 kilobytes.

Imagine that saving, and this isn't just down to minification.

This is actually figuring out what CSS

selectors you aren't using in your project.

To give you another set of figures, that's taking down a

Bootstrap file that was 120 kilobytes in size, down to 11 kilobytes.

So, I hope that some people are going to find this task useful,

maybe it'll blow your mind, I don't know, but, check it out at bit.ly/uncss.

The next thing we're gonna talk about is Bower.

Now Bower is basically a package manager for the web.

And, what that means is that in addition to sort of running over

a number of different protocols, it removes this old way of doing things.

So we're all used to this, this, this set of steps.

We figure out oh, hey, wait a minute I've got

a dependency in my project that's six months out of date.

It's got some security loopholes.

I probably wanna fix that.

I have to go and I have to open up the site,

download the livery, copy it from

my downloads directory over into my application.

Paste it in there, and then wire it

up with script tags if the version numbers changed.

What if we could actually automate a lot of that?

Now the new hotness is using Bower.

And you can install it using npm install-g bower.

You can then use bower search as

your discoverability mechanism for finding new libraries.

You don't have to actually go and open up websites anymore.

So let's say I wanted to go and

find AngularJS, and have Bower manage it for me.

I just type in bower search angular.

And as you can see, we get back as, a list of results.

I've, I've sort of truncated this list because it's a slide.

But there are hundreds of results that show up.

At the very top we have, you know, a popular package.

So angular, the actual library itself.

Below, we have a tone of different Angular directives and plugins.

And things that you can go and extend your project with.

Now one of the nice things is if we actually go and install angular, and

we can again pass in save-dev to, to have it saved into our local configuration.

It'll actually install that in a local directory for us.

And if our dependency happens to have other dependencies, so, let's say

they were trying to install, you know maybe, backbone or, or jQuery UI.

It'll actually automatically figure out, oh wait.

So that package has a dependency called jQuery.

So jQuery UI relies on jQuery.

How about I go and fetch the latest compatible version of that

package for you, so you don't have to worry about doing it yourself?

It'll just go and it'll install it locally,

and you can start using it right away.

Now, bower install actually supports a number of different options.

You can pass in version numbers.

You can override, you know, the, the place

where you actually want to install the package from.

You can install from a, a CDN if you want, for example.

And you also have access to a command called bower list, which is

usefully for actually listing out the

different dependencies you have in your projects.

So here you can see I've got a project where I've got Angular, Bootstrap jQuery.

And in blue, take a look at that, that's actually quite interesting.

In blue you'll say that latest on a, on the angular dependency is 1.2.0.rc3.

Now, you know, you might be wondering, well, why didn't it, didn't it

install the latest version for me, instead of installing the version that's in white?

Well, the version in white is the current stable on Bower.

If you want, you can actually override the stable

version being installed, and install the latest release candidate instead.

But, we try to prescribe best practices there and say you should be

using a stable version, unless you absolutely

want to be using something [INAUDIBLE] edge.

You can even go and wire up dependencies from the command-line.

So Bower as a package manager, manager doesn't do this for you.

But if you wanted, you could actually go

in and use a Grunt task called grunt-bower-install.

And this will allow you to wire up dependencies that you've installed

from Bower, up into your index files, or up into your templates.

So the way this works, is that, once you've installed it into your project.

You got and you use Bower to install any of the dependencies that you might need.

And then you just run grunt bower-install.

And it'll do all the rest of the work for you.

It'll figure out where your dependencies are, inside your application, and

it'll script and wire them up, no more script tags for you.

Saves you time.

So if you wanna go and check out Bower you can find more at bower.io.

You'll also be interested to take a look at bowersearch.

So this isn't, I believe this is li, linked somewhere on

the Bower homepage, but bower search is basically like a site

a little bit similar to npmjs.org where you can go and

use a, you know, use a gooey to locate Bower components.

It's a really great discoverability mechanism, it'll list out the hot

components of the day, and a number of other useful things.

So that might be interesting to check out as well.

And then we have Yo.

And for people who haven't really played around with Grunt or Bower before

and still feel that it's a little bit too much to get started with

and, and you know, a little bit too much to start learning, Yeoman

is a little bit like your gateway into this magical new world of tooling.

So some of the things it does, is it

will actually scaffold you out the boilerplate for a project.

So if you're working on a new Angular app, it'll scaffold you

out the basic project that you need to start actually building something useful.

It can scaffold out static sites, scaffold

out Bootstrap sites, and all sorts of things.

Yeoman also prescribes useful Grunt tasks, depending

on the type of application you're building.

So if we think that there's a Grunt task that'll

benefit someone using a framework like Ember, or something like Backbone.

We''ll give it to you without you having

skill and manually find it and install it yourself.

We'll also set up all the configuration for, for you.

And we can also automatically install all

the dependencies needed for a project using Bower.

So if, you know, at the command-line you say when we

are trying to, to create a new project, hey, well I'd actually

like to use, you know, jQuery or Modernizr, orsomething like that,

we'll install it for you, you don't have to do anything else.

I think it's pretty awesome, but to install Yeoman once again we use npm.

And the idea is just to, npm installed G and Yo.

Because we're trying to simplify your workflow as much as

possible, we'll actually install both Yeoman, Grunt and Bower for you.

You don't have to install these tools separately.

Now once you run Yeoman for the first time, we actually give you a wizard.

So, the Yeoman idea is that we wanna make it

very easy for beginners to be able to get started

with projects, and make it easy for people who are

slightly beyond that point, to scaffold out projects as well.

So, here we've got a wizard, where it's saying, well, what would you like to do?

I've got a number of generators already pre-installed here.

I've got an Angular one, a Backbone one, one for creating new jQuery plugins.

But, because I'm starting off afresh, let's

say that I just wanna install a generator.

So I just hit Enter on Install a Generator.

And then it'll ask me, well, would you

like to search NPM for any Yeamon generators?

And I say yep, well yeah, sure.

I'd like to search for something I can do with jQuery.

And, it'll tell me if it found one, and give me a list of options.

So in this case, it's saying, well, there's

a few different generators for jQuery projects available.

One for jQuery boilerplate.

And other for jQuery mobile projects.

And when you run yo jquery-boilerplate.

This is from the simplest generator that's available.

It'll scaffold you out a new jQuery plugin.

Notice that it's created you a Gruntfile and a

package.json file, without you having to do anything yourself.

So you can go into this project, and you can just run Grunt.

And it'll already have the configuration setup.

Now, this is a very stupid simple project.

But you just created a jQuery plugin that way.

Now for most people, you probably wanna be installing custom generators.

And the way to do this, is running npm install.

And for Yeoman generators, we have a name space called just generator dash.

And the idea here is that I'm trying to install

a generator, generator for helping me with my Bootstrap projects.

Again, this is a very simple one.

Once I have it installed, I just go and run, yo bootstrap.

And in this case, it'll give me a prompt,

asking me, what format I'd like those Bootstrap CSS in.

Would I like it in Sass, Less, Stylus?

Now, I find this useful, because, I never know what [INAUDIBLE] of

Twitter Bootstrap to actually go use if I'm working with a pre-processor.

And in this case, I just run one thing at the command-line.

And it'll go off to Bower and fetch the latest version of

one of these dependencies for me, without me having to work on anything.

For most people in this room, you're probably gonna be working on some

sort of web application, and so we have a dedicated generator for web apps.

It's called generator-webapp.

Now, once you have this installed, you just run it,

using Yo web app, and it'll ask you a few questions.

So, out of the box, I include HTML5, Boilerplate, and jQuery.

What else would you like?

So, it's gonna ask you three questions.

Would you like Bootstrap for Sass, RequireJS and Modernizr.

Now you might think well, all this is

gonna do for me is just install three libraries.

I can just go do that in my browser myself and, and not have to

use any of these tools, but there's a

little bit more going on behind the scenes.

If you select Modernizr here, we're actually gonna set

up another Grunt task called Grunt Modernizr for you.

And what that will do, is at build

time it'll actually go through your entire project,

figure out what feature detects in Modernizr you're

using, and it'll strip out absolutely everything else.

So you don't end up shipping one big library

to your users, you just ship the smallest thing possible.

And we set up all the configuration for that.

If you select RequireJS, in addition to installing RequireJS, we'll

actually set you up some unit tests that you can use.

We'll set you up with some scaffolding you can use.

You don't have to configure your RequireJS paths or anything like that.

And we'll also set you up RJS, the RequireJS optimizer.

So you can actually use it at build time for compiling parts of your projects.

And with Bootstrap for Sass in addition to RequireJS not

only do we set you up everything you need to

compile your abstraction, we'll also make it easy for you

to just go into your editor, after its scaffolded this out.

You can run a new server, and any change that

you make inside your editor, will cause the browser to refresh.

So, you have this nice real time view of what's going on.

This is what we scaffold out.

It's extremely basic, and in this case, I just selected

some of those options, but what it creates for you and

what it gives you, is same boilerplates that you can

go and start working on, the ability to easily use abstractions.

I don't have to go and worry about setting up any

sort of workflow or bill process form my Sass or my CoffeeScript.

I get instant access to grunt bower-install.

I get best practices for performance optimization by default.

So, it will automatically be

using grunt-contrib-imagemin to minify your images.

They'll already have things like script concatenation

and CSS concatenation set up for you.

It'll also use grunt-modernizr as I was

saying, you know, run all those tasks concurrently.

Out of the box, you also get a nice test setup as well, so you can use Mocha.

You can use Jasmine [UNKNOWN] JS.

Now, even if your takeaway from today is, you know, this stuff

is just way too much for me, I'm doing something much simpler.

But, I'm interested in the idea of using Grunt

in my projects, I've heard some great things about it.

You can always go and learn how to get some best

practices into your own projects by studying the Yeoman Grunt file.

We do some really, really interesting things in there.

Things that will save you time having to sort of configure your projects and

get started with some of these other tasks that can save you time at Build.

Now when you run Grunt server inside a new Yeoman

project, what we give you is the ability to LiveReload.

So, here I have a project that I've scaffolded out,

and, I can go into my editor, makes changes, and

say, you know, maybe I can change the title to

who is your daddy and, and what does he do?

Now as soon as I save, it'll actually refresh the browser; so,

I have this nice, consistent view of the state of my application.

What's even better, is that with minimal configuration, you can also change this.

So that you're able to get cross device live reloading.

So this is my workflow.

This is my desk at work.

I have to test and make sure that my apps work great on a number of devices.

And I'm able to actually have them just listed all around me, just surrounding me.

And, I load this up once on each browser on each of my devices.

It's the, you know, whatever browser I want.

Whether it's Chrome for Android or Firefox OS, or whatever have you.

I can start making changes on my desktop, and see my desktop browser refresh, but

I can also see what those changes look

like instantly on all of my target devices.

Now the amazing thing about this, is that because we all care about

mobile, and we wanna be able to deliver experiences that work great everywhere.

You can instantly catch regressions that look, you know, crappy on

those devices earlier on, rather than looking at this stuff later.

If you wanna check out how to set

this up for a Grunt project, it's bit.ly/gruntsync.

And what about framework?

So, I was talking about Angular a little bit earlier.

Now, in Yeoman, we have a generator for Angular.

So, once you install it, just run yo angular and it'll ask

you a few questions once again, like would you like to include Bootstrap?

Would you like the SCSS version?

And also, would you like specific modules related to Angular?

So things like resource, cookies and sanitize.

What this gives you out of the box, is actually not just sort

of a default application you can go and build on, but it gives you

a complete set up using Karma, and all of the best practices that the

Angular JS team think that you should be using a day to day basis.

We work quite closely with the Angular team.

We actually have a member of the Angular team on the

Yeoman team and it's currently recommend as their default tooling of choice.

Now you can also scaffold out smaller pieces of

an application using Yeomen using something we called sub-generators.

And the idea is, if you wanna go and create a new view,

or a new model, or a controller, why not do that from the command-line?

Why not have the boilerplate for those smaller pieces done out for you?

So here I'm able to scaffold out a new view.

Or a new directive.

Or go and install something from Bower instantly.

And it'll all just work out nicely together.

So you can easily create Angular apps with dependencies

without having to, to worry about any of that boilerplate.

Now, the Yeomen community is actually growing at a pretty nice pace.

We have an increasing number of people that

are trying to use it for full stack development.

So, here's my vision for Yeomen, I would like you to be able to

go and say well, here are the four things I wanna use in my stack.

Maybe I wanna go and use Mongo.

Maybe I wanna Angular.

Maybe I wanna use Express.

Maybe I wanna use Node.

Maybe I wanna use other things.

One line at the command-line, will give you all

of the setup you need, to go and develop things.

That's the direction that we're moving in.

I wanna make it very, very easy for you to get

it setup so that you can go and work on a project.

So there's generator that I'll do that.

There's a Yeomen generator for Jekyll.

Another for creating Chrome extensions.

And recently we actually put together a

Yeomen generator for creating mobile first projects.

So for people that want to be able to say use

foundation or top coat, or any of those other UI frameworks.

And also have sort of integration, with cloud device testing.

So services like BrowserStack.

We have a generator that can help you get started with this stuff.

For more on that, check out yeoman.io.

We also have a generator search available on the site where you can

go and find out all of the other generators that people work on.

And if you're looking for demo apps built with

Yeoman you can actually check those out at bit.ly/yeomandemo.

Now there's four small apps built there using the project.

But, it'll give you a very quick way to take

a look at some of the stuff in our Grunt file.

Without you having to go and install any of this stuff.

But the idea behind Yeoman and the three tools that

I presented there, was work less, do more, and make awesome.

And, you know, if any of you do end up trying out

these tools, and you have questions, please feel free to let me know.

We're always trying to improve the tooling chain as much as possible.

Now, with the time I have left, I'd like to talk a

little bit more about how you can improve the rest of your workflow.

So let's say that, you know, let's for argument's sake say

that nothing I've shown you so far has been useful to you.

Let's say that there's other things in

your workflow that you could use help with.

Well let's talk about some of that.

I believe in learning to love the command-line.

I know that some people here are already gonna be quite familiar with it.

But for those who, who aren't convinced that its worth spending your time on one

thing that I found really automates my

workflow, is the ability to script common tasks.

So I spend time reviewing things that I do on a day

to day basis, that I could potentially just move into a script.

And that way I can just have the script take care of that process for me.

And a lot of the times I end up putting this stuff

into my dot files, which you can consider, if you, if you aren't

already familiar with it, as a default set of of ways to do

things, of functions, of aliases that you can move on, onto any box.

So some of my favorite things to use dot files for

are sort of this alias for starting up a new server inside

my project, so I go into any directory, start up server,

and I can use it to just go and preview the application.

I noticed the other day that something I was doing,

when I was working with GitHub, was going off, coding your

repository, waiting for it to finish, CD-ing into that project, and

then opening up Sublime so I can actually edit on it.

So I figured, well, why not try automating that process.

And that's what gave me Clone.

So Clone is a function which will take care of those steps for me.

I just type in Clone, and then the name of a repository on my account.

And then it'll go, and it will get it for me.

If I type in Clone, and someone else's name, and their

repository, without having to type in any of the other GitHub stuff.

It will script that for me.

So there's little things to do to automate your workflow.

I use iturn2 a lot and it's got this really great replay feature.

That'll record all of your interactions with the command-line over time.

You can just use this, this bar at the

bottom to sort of scroll back and forth through

time and figure out where you're actually spending a

lot of time in your day to day workflow.

[UNKNOWN] magic on Twitter are a fantastic resource to check out.

If you're trying to learn more about the

command-line, they've got amazing pro tips there every day.

And, I'm constantly blown away with some of the stuff that they recommend.

Now, there are worse things than working on the command-line.

I was, I was playing around with this CSS jigsaw puzzle the other day.

I thought it was pretty neat.

I thought, you know, yeah, I'm gonna spend an hour trying to,

to solve this and figure it out and, and see how this works.

But when you solve this, do you know what it says?

It says go outside, which I probably you need to do more.

But there are also tools that can help you do things more quickly.

Another one that I use more commonly is Alfred.

Alfred is a Mac only app.

I'm sorry Windows guys, but I do an alternative for you soon.

Alfred is a great app for being able to find things very

quickly, and my friends at [UNKNOWN]

recently put together a site called alfredworkflows.

It's a GitHub repository.

But it basically captures a ton of new stuff that you can use Alfred for.

So, things like being able to easily find packages on npm.

So, I can just run a quick set of short cuts and be able

to find anything on npm without even having to go back to the browser.

If I want to go and find Grunt tasks, I can do that from Alfred.

I can still be inside my editor and just run Alfred and do that.

If I want to go and do a browser compatibility

search on some API that I wanna use, or some

method, this can call out to can I use, and

in the exact same window show me results from it.

It can find you documentation on dash, and

show you results from things like Font Awesome.

So Alfred [INAUDIBLE] workflows are, are really, really

powerful, and I recommend you trying those out.

Now, again, for people who are in Windows.

There is a similar tool called Launchy, you might be interested in checking out.

It's not as featureful as Alfred is, but it'll get you a little bit of the way.

Automator is another great tool, if you're on Mac.

It can help you sort of script system operations,

like being able to select files, and have them.

Convert to a specific format with certain settings.

On Windows, check out Macro Recorder for that.

Now I'm running out of time and so, what I'm

going to do is, I'm gonna show you one or

two things really quickly and then I'm gonna announce some

new Chrome DevTools features, that you might be interested in seeing.

We haven't actually announced them anywhere else before.

Now, another thing that I think people need to care more about.

Is their text editor.

You spend the most time in your editor creating things,

and so it absolutely makes sense to know it inside out.

Consider it an onion application, where you keep peeling

back the layers to learn about new functionality that's available.

Some of the things that I've been using a lot are shortcuts.

And these specific Sublime packages.

So Sublime Autoprefixer is amazing.

If you happen to hate working with

prefixes, this will solve all of your problems.

You can be writing any of your style sheets

just using, you know, no vendor prefixes, and Sublime Automator,

sorry, Autoprefixer, will automatically write those in for you, so

you don't have to do [UNKNOWN] bother doing that yourself.

Another really interesting package is Emmet.

Now Emmet is sort of the replacement to Zen Coding.

And the idea here is that just using a few key

strokes, you can actually define complete blocks of markup that you want.

So here you have to find a complete list, and

if I wanted to, I can say okay, well I wanna

create a complete list with nine items, and maybe that

will also include a link of some sort with an image.

And so I can just say, okay well, create me an A Yeoman with an image.

And there we go.

That's a really nice time saver, and if you learned all the shortcuts off, you

could then use multiple cursors to actually start

writing code in, and saving yourself some time.

STProjectMaker is something that barely anyone knows

about, but this is a new Sublime project.

That basically helps you with templates.

So let's say that you know, you feel like Yeoman and Grunt

and all of that other stuff is a little bit too heavy.

It's not, but let's say you think that.

And let's say that maybe instead there are a smaller

little set of files that you always find yourself using.

When you're creating a new app or a new site.

With the STProjectMaker, you can just tell it, well, this

is the boilerplate I usually use and give it a name.

And then inside Sublime, any time you wanna create a new project, you can

just go to a menu and select

which boilerplate you wanna use, it's incredibly powerful.

So bit.ly/stprojectmaker is, is the place to go to for that.

Sublime TernJS is a Sublime plugin for a

project by Martin Ha Hammerbeak who I think

wrote eloquent JavaScripts, but the basic idea there

is it gives you much better code completion.

So Tern is able to properly analyze your

code and understand it better, and give you smarter

decisions when it comes to being able to

auto-complete things when you're working inside of your editor.

The Sublime Build System is something not enough people use it

actually can call out to any tool that you want, including Grunt.

So if you wanted to stay in your editor, and go and call off to your bill process.

You can easily script this.

So check that out as well.

I'm gonna skip over sublime-linter.

But the nice thing about this, is that I'm able

to get instant feedback while I'm working in my editor.

Anytime that I make a mistake.

And this means that I don't have to worry about

going back to my bill process to do it later on.

So, how about we announce some new things that are in the Chrome DevTools?

One thing we've been working on a lot lately, is the

idea of improving your ability to edit directly inside the browser.

I'm not gonna say the DevTools are now and IDE, but we're

now a much more powerful editor for being able to do things.

Now the first thing we've introduced recently is this concept of work spaces.

So let's say you're working on a new project.

And you'd like to be able to actually edit and debug it inside of DevTools.

With work spaces, you just select that project on

your directory in your In your, in your system.

Add it as a local work space.

And it'll then show up directly inside the

sources panel, any time that you open up DevTools.

Now you can do pretty much anything with this.

It will give you Syntax highlighting.

It'll give you the ability to go and set breakpoints directly

inside your code, and, if you happen to go and close

the DevTools, and you close Chrome, we'll actually save all of

your breakpoints for any of the files that you've been working on.

So, you can return back to the exact same state that you were working on before.

So, that's great.

First new feature, is the ability to create new files.

Chrome DevTools in Canary is the first browser to

actually give you the ability to create new files.

I know it's a really stupid simple thing, but I've

been campaigning to get this in for a year now.

But this lets you create new files inside your applications.

You can actually do complete application development inside the tools.

You can get access to a complete debugger.

You don't have to worry about hopping back

and forth between your text editor and the browser.

So this lets you create new files, with

Syntax highlighting for pretty much anything you can imagine.

Regardless whether it's JavaScript, PHP, Rails, it's all supported.

Now, awhile back we added support for Sass Source Maps,

and the idea there was, lets say that you know.

You love working with Sass, and when you compile

your CSS, you end up previewing it in the browser.

And then you realize oh, wait I, I'd like to make some changes there.

Well, with Sass Source Maps, you could basically go into the elements panel.

And, rather than just seeing the line numbers for your CSS.

You see the line numbers for your original Sass Source Files.

So you could quick threat back straight through to

them, and be able to edit your Sass directly

inside of DevTools, and see it refresh inside of

Chrome whereas Sass compilier is are running in the background.

The next new thing that's avaliable is support for less.

So you can now use Less Source Maps inside of the DevTools.

So, the exact same way that this works with Sass

you can be previewing your project using Less, and as long

as you have Source Maps turned on, you can actually

click through, and go and start editing your Less Source Files.

It's quite nice.

Another thing we added a few weeks ago, is the ability to CSS pretty-print.

Let's say that you've been given a project to check out by somebody else.

Maybe it's an agency, maybe someone just wants you to review their code.

Well, for the longest time we've supported

the ability to go and pretty-print JavaScript.

So you just go inside the source's panel, you click a little

curly brace icon at the very bottom, and we'll pretty-print your JavaScript.

That's now supported for CSS as well.

This is ridiculous because we've, we've had features that have, you know,

been worked on for six months and yet, this got like 600 retweets.

I don't understand it.

Another new feature that we've just added in

Canary, is the ability to ignore library code.

So let's say that you're debugging an application.

Maybe it's using a framework of some sort.

Maybe you're using jQuery.

Maybe you're using Backbone or Angular.

Now one thing that you might run into, is

that, you run into an exception or an error and

be thrown directly back inside the library, rather than

the position in your code where the error originated from.

And that's a pain.

If you, if you happen to be using DevTools,

you've most likely run into this at some point.

Now, with the ability to ignore a library code, and

this is in Canary once again and it's, it's an, experiment.

Enable framework debugging support, add in a new

pattern, so here I'm adding in the pattern jQuery.

And then, when you're actually getting those exceptions,

they'll be shown up as being from your code.

It'll take you to the line in your code

where the exception actually originated from, rather than the library.

And lastly.

And this is the thing that's blown my mind the most.

You can now actually access the terminal, directly inside of Chrome.

There's a new DevTools extension called DevTools terminal, that will let you

get access to anything you can with the command-line, directly inside of Chrome.

So if you want to access Bower, you wanna access Grunt, you wannaaccess [UNKNOWN]

or NPM, or anything else, you can now do that inside of the Chrome DevTools.

So here you can see I did a Bower search

for something, and I got all of my results back.

It'll also preserve line coloring if you happen to

have configuration setup for whatever your terminal of choice is.

This is something that's completely brand new.

This is gonna change your workflow, cuz it

will mean that you're able to get access to

a complete debugger that works for the V8, a

complete editor that can do anything, and the terminal.

Inside one place.

So, you can do all sorts of things with this, if you

wanted to, you could so the way that you set this up is

you connect to the local host, you can then get access to all

the file system commands, you can

be creating pages directly inside the terminal.

You can go and check this out at

bit.ly/devtools-terminal, it's amazing and it will change your workflow.

So with that, that's the end of me.

I'm hoping that this is you at this point, I know it's late in the day.

If you aren't using automation, you're working too hard.

And please at least consider the, the little

things that you can do improve your workflow.

Use tools not rules.

We tend to hang ourselves up on actually saying well, you

know, you should care about performance, you should be using these tools.

Try to figure out the tools that make

sense for you, and will actually benefit your workflow.

Improve your developer happiness.

And with that, thank you, and please party on.

[SOUND]