Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Start a free Basic trial
to watch this video
Keynote - Automating Your Front-End Workflow With Yeoman 1.0
49:45 with Addy OsmaniWriting a modern web app these days can sometimes feel like a tedious process; frameworks, boilerplates, abstractions, dependency management, build processes..the list of requirements for a front-end workflow appears to grow each year. What if however, you could automate a lot of this? This session introduces you to the Yeoman workflow, a combination of three tools working in harmony to keep you productive on the front-end. Whether you're using JavaScript or CoffeeScript, RequireJS or script tags, this workflow can help you spend less time on process and more time on what matters - building great web apps. We will walk-through how to use Yo - a scaffolding tool for creating apps, Bower - a package manager for client-side dependency management and Grunt - a popular task-based build tool.
-
0:00
[MUSIC]
-
0:04
[INAUDIBLE] I happen to really love tools,
-
0:12
and tools are kind of amazing, because, they help bring our ideas to fruition.
-
0:17
Regardless of whether you're a geek, tearing up a
-
0:20
box, and using a glue gun, and some celltape.
-
0:23
To make the most awesome helmet ever, or a JavaScript developer
-
0:27
building a really complex app, or a designer building a website.
-
0:31
Today we're gonna take a look at how
-
0:33
to improve your developer productivity and happiness during development.
-
0:36
And there are tons of tools that can really help
-
0:39
with this, and I hope that, you, you'll be able
-
0:40
to get at least a little bit out of this
-
0:42
talk that's gonna help you with your day to day workflow.
-
0:46
Speaking of tools, so,a little bit about me
-
0:50
if you have any comments or questions during
-
0:52
the talk at all, comments, questions, viagra spam,
-
0:55
please feel free to hit me up on Twitter.
-
0:57
For the one person in the audience probably
-
0:59
using Google Plus, I'm on there as well.
-
1:01
We have a little party every time someone joins, so I'm on there.
-
1:06
So the other day I was trying to install a tool.
-
1:09
Reece knows what I'm talking about.
-
1:10
So I was trying to install a tool,
-
1:11
and it automatically started installing Java for me.
-
1:15
Now when you start installing Java these days, it actually has this big thing
-
1:18
that shows up saying that there are three billion devices that run Java now.
-
1:23
That's fantastic!
-
1:25
Unfortunately, there are also 14 million people in the
-
1:28
world that have syphilis, but I don't want that.
-
1:29
[LAUGH]
-
1:32
I totally stole that joke off of Bruce, who is the friendliest guy ever.
-
1:36
Sometimes he's a little too friendly, but, we won't talk about that.
-
1:40
[LAUGH] These things come back to bite you sometimes.
-
1:44
I don't, I don't really hate Java.
-
1:47
Sort of.
-
1:49
Sort of is one of those phrases that don't really mean anything.
-
1:52
Like, it, you know, it works cross browser or
-
1:55
it doesn't use flash, or it's a boy, sort of.
-
2:01
I live over in Greenwich, well the Royal Borough of Greenwich.
-
2:04
The queen wouldn't really be seen dead here, but if
-
2:06
you go check us out on Google Maps and you
-
2:08
look at street view, you'll eventually find that there are
-
2:11
two guys battling to the death using swords, for some reason.
-
2:14
I can only imagine that they're having some
-
2:16
sort of web versus native battle to the death.
-
2:18
I don't know what's going on here.
-
2:22
I love experimenting.
-
2:23
I love experimenting with new tools and new ideas.
-
2:26
The first time I tried to experimenting some, with something
-
2:28
was a few years ago when I was on Wikipedia.
-
2:31
And I thought I'd be really smart and
-
2:33
actually try Wikipediaing what Wikipedia actually means on there.
-
2:37
And so I went to the site and I started typing it out.
-
2:39
And you know what it said?
-
2:41
It said I was an asshole.
-
2:44
[LAUGH] This edit is far-gone.
-
2:48
But, you know, never be afraid to actually poke at things and find out how they work.
-
2:51
You'll learn quite a lot in the process.
-
2:53
So, trying to develop for the web today, is a little bit
-
2:56
like trying to do your taxes in the middle of some amazing party.
-
2:59
It's getting more and more complex as time goes by.
-
3:02
Our tooling landscape is getting more complex.
-
3:05
There are more and more things that we
-
3:07
wanna be able to use on a day-to-day basis.
-
3:09
Now, this is what, this is roughly what the tooling landscape looks like today.
-
3:13
We're having to use boilerplates, frameworks, abstractions.
-
3:16
Things that generate our documentation.
-
3:18
Things for our build process.
-
3:20
Continuous integration, version control, and so on.
-
3:22
If you're a beginner, this is basically what the situation looks like.
-
3:27
You're just put off.
-
3:28
It's really scary, it's really daunting.
-
3:31
But luckily there are things we can do to actually assist with
-
3:33
this regardless of whether you, you know, you're just starting out in
-
3:36
the industry, or you've been a veteran and you've been doing this
-
3:38
stuff for a long time and you're hacking away on the command-line.
-
3:41
Now the first rule of tooling, is thou shalt not make Paul Irish cry.
-
3:44
I promised him I, would try to make sure I didn't do that.
-
3:47
And the second, is that you should
-
3:48
only choose tools that you're gonna actually use.
-
3:51
It's very, very easy to, you know, see on Hacker
-
3:54
News or on Twitter that something is the next biggest thing.
-
3:56
And you have to be using it.
-
3:58
But if it's not gonna be practically useful to you, you know, there's
-
4:00
no need, need for you to go and invest time in using it.
-
4:03
Just, make sane choices there.
-
4:05
Now, regardless of what you do, time is a
-
4:08
really key factor in being able to stay productive.
-
4:10
We've got so many distractions today and we, we really, ideally just wanna be able
-
4:13
to focus on the logic for the apps we build and the sites that we build.
-
4:19
What are you able to do to save yourself time?
-
4:21
Other than putting a baby into a sink?
-
4:23
I mean, that's just not right.
-
4:25
Try to automate those repetitive tasks that you find yourself doing every
-
4:29
day, and there are a ton of ways that you can do this.
-
4:30
I'll, I'll show you some tools to help with this a little bit later.
-
4:33
But doing that will help you stay effective, it will
-
4:36
help you make sure that you're as productive as possible.
-
4:39
This has been done in lots of other industries over the past 50 years.
-
4:42
It's been done in the car manufacturing industry for example.
-
4:45
Where rather than manually putting together
-
4:48
machinery it's all done by machines now.
-
4:50
Now automation, you know, it sometimes gets a, a bad you know, bad rating.
-
4:54
People think that it's all about you getting lazy, but it's not.
-
4:57
It's about you trying to get efficient.
-
5:00
Efficiency could look like this.
-
5:02
You know, it could be you sitting down on your couch, and being lazy as fuck.
-
5:07
But, you know, I believe that the right tools
-
5:10
make the difference between an artist and a craftsman.
-
5:13
It's the difference between the person that can go and start off in a
-
5:16
new project in 50 minutes, and the person that can do that in five.
-
5:21
Now you, you wanna be the person that can do that in five,
-
5:23
because it'll mean that you can spend more time actually building something amazing.
-
5:26
So this is what the average front end workflow looks like today.
-
5:30
We usually start off with some sort of set up.
-
5:33
We scaffold out.
-
5:34
We might, you know, go pick out a boilerplate of some sort.
-
5:37
If you're a beginner, you're probably using jQuery.
-
5:39
And maybe you're gonna go and use jQuery boilerplate.
-
5:41
Or if you're building an app, maybe an angular boilerplate of some sort.
-
5:44
You'll go and you'll download libraries, download templates, download frameworks.
-
5:48
And this is sort of a process that we
-
5:50
repeat every time we're working on a new project.
-
5:52
This is something that we could probably automate.
-
5:54
We then go onto the development phase,
-
5:56
where increasingly people are using Watch tasks.
-
5:59
Now a Watch task will basically watch a set of files or a single file for changes.
-
6:05
And go and run some process once it's completed.
-
6:07
So, that's something like you know, using a preprocessor like Sass or Less or
-
6:11
Stylus, and it going and actually compiling
-
6:14
your source files into CSS for you.
-
6:17
Or whether, you know, regardless whether you're
-
6:19
using CoffeeScript or Jade or, or other abstractions.
-
6:21
Another thing people are using a lot more these days, is the concept of LiveReload.
-
6:26
Where you're able to have your editor and the browser side by side.
-
6:29
And, in real time get, you know, a view of the state of the application.
-
6:32
So, you make a change and you're able to have the browser
-
6:35
refresh, to show you where you're at, and how things actually look.
-
6:39
And then we've got, increasingly, tools for linting your CSS
-
6:42
and linting your JavaScript, which you should be using by default.
-
6:45
And then we've got the Build step.
-
6:47
Now, builds are really interesting, because
-
6:49
they vary massively from project to project.
-
6:52
There are few things that we, we all do.
-
6:54
I mean things like, you know, minifying CAT [UNKNOWN] our CSS and
-
6:57
our scripts, running our unit tests,
-
6:59
code lensing, trying to optimize our performance.
-
7:02
There's a lot of stuff in there.
-
7:05
Now the good news is that, you know, you can automate
-
7:08
a lot of this, for both simple projects and more complex projects.
-
7:11
Let's talk about how we can do this for simple
-
7:13
projects, which will hopefully be good news for some people.
-
7:15
Now there are a number of tools that have been, you know, coming
-
7:19
out over the past year or two to help with this kinda thing.
-
7:22
CodeKit is fantastic for this.
-
7:23
It's been around for ages, it's probably the
-
7:25
longest living sort of desktop tool for the Mac.
-
7:28
To assist with workflow.
-
7:29
But it can do many of the things that we just talked about.
-
7:32
There's also other options like Hammer.
-
7:34
Which tries to take a sim, similar approach but on this more with templates.
-
7:39
So you can actually get started with building sites more easily.
-
7:44
For people on Windows.
-
7:45
Now I'm gonna stop very quickly and say that a lot of the time when
-
7:48
we're talking about modern front end tooling, we
-
7:50
focus too much on tools that are just
-
7:52
available for the Mac, but people using Windows,
-
7:54
and I know there are tons of people
-
7:55
using Macs here, I'm using a Mac, but
-
7:57
people developing Windows, are equally as valid developers.
-
8:00
And so I'm gonna try giving you sort
-
8:01
of Windows equivalence for anything that I mention today.
-
8:04
So Prepros is something that I noticed does the exact same thing as CodeKit.
-
8:08
It also happens to be free, and it's also available for the Mac.
-
8:11
So if you wanna go check that out please feel free to.
-
8:13
They've got a pro version as well, but, it helps you with
-
8:16
your, you know, day to day
-
8:17
workflow working with preprocessors and and abstractions.
-
8:21
Another option if your on Linux, because again we
-
8:24
tend to ignore people working on Linux, is Koala App.
-
8:27
Now, I believe this is also free, but, it gives you, once again, a similar
-
8:30
workflow where you can say well here's a
-
8:32
directory I'm working on please go and figure
-
8:35
out, you know, what abstractions I'm working, I'm
-
8:37
using, and, and connect up the tools that
-
8:39
need to compile those things into my final files that I can preview in the browser.
-
8:43
And, tools like this can actually be
-
8:44
really helpful for your day to day workflow.
-
8:47
Mixture.io is another tool which takes the concepts that these other
-
8:51
tools like Hammer and CodeKit and introduce and takes them further.
-
8:56
So it introduces this concept of of prototyping with boilerplates.
-
9:00
So if you wanna get started on a
-
9:01
project with Twitter Bootstrap or Foundation or something else.
-
9:05
You can use Mixture and it's available for Windows.
-
9:07
It's available for the Mac.
-
9:09
But it gives you a lot of the things you wanna be using.
-
9:12
Things like your LiveReload.
-
9:13
Things like your abstraction compilations.
-
9:16
It's really, really cool.
-
9:19
For people who don't feel that they want additional tools to help with, sort
-
9:22
of a broader workflow, there are more focus tools that can help with this stuff.
-
9:26
Things like CompassApp.
-
9:28
Which will help you just avoid having to go
-
9:30
back and forth between the terminal and your editor.
-
9:33
It can just be running in the background, taking care of compiling your Sass.
-
9:36
Things like Scout App, which do something similar.
-
9:39
This is available for, for Windows and the Mac.
-
9:42
But you'll see that there are actually quite a lot
-
9:43
of tools that can help with your workflow on the desktop.
-
9:47
I believe in iterative improvement, so even if you're someone that decides
-
9:51
to go and use one of these desktop tools today, that's fantastic.
-
9:55
Doesn't mean that you can't be someone that's
-
9:56
hacking on the command-line to automate your workflow tomorrow.
-
9:59
And the way that I look at this is first do it, do it right, then do it better.
-
10:05
And the basic idea is that you iterate on how you improve your workflow.
-
10:10
One step at a time, you're improving your productivity.
-
10:12
And your ability to just jump straight into
-
10:14
a new project, and actually start writing some code.
-
10:17
Rather than worrying about those
-
10:18
boilerplates, and setups, and abstractions.
-
10:22
Much of what I develop.
-
10:23
You know, some people have a perception that it looks like this.
-
10:26
The reality is, a lot of it actually turns up like this.
-
10:31
I'm not ashamed to say it.
-
10:32
It looks pretty in some people's eyes.
-
10:36
But what would be better than using these desktop tools?
-
10:40
What would be better is the ability to actually
-
10:42
automate our workflow for any type of project, regardless
-
10:45
of how complex it is, regardless of how many
-
10:48
people are working in our team, and so on.
-
10:52
And so, one possible solution to this, is a
-
10:54
set of tools we've been working on, called Yeoman.
-
10:57
Now Yeoman is composed of three main tools: Yo, Grunt, and Bower.
-
11:02
And each of these tools is worked on by different teams, but we all share
-
11:05
the same common goal, of trying to help
-
11:07
you become more productive on the front end.
-
11:10
Now you can scaffold out new applications and new sites using Yo.
-
11:14
You can build, preview, and test your projects using Grunt, and you can
-
11:18
manage your dependencies using Bower, which is
-
11:20
a new package manager for the web.
-
11:22
Let's take a look at these in a little bit more detail.
-
11:24
But what they give you, is basically the
-
11:26
flexibility to customize your project and your build setup.
-
11:29
As much as you want.
-
11:30
You can choose whatever dependencies you
-
11:32
wanna use, and have them automatically managed.
-
11:34
You can choose whatever boilerplates you wanna use, without having
-
11:37
to go back and forth manually fetching them from a site.
-
11:41
You can limit the time you're spending writing boilerplate.
-
11:43
There's actually a vast amount of options
-
11:45
available now for scaffolding out projects using Yeomen.
-
11:49
And in general, you can improve your productivity,
-
11:51
and delight whilst trying to develop a new app.
-
11:54
So let's take a look at Grunt which Jack Franklin
-
11:56
is gonna be covering in a little bit more detail tomorrow.
-
11:59
So Grunt is a task runner, and it basically helps you run repetitive tasks.
-
12:04
So any of those things that we were talking about before at build time.
-
12:06
Things like your linting, your compilation,
-
12:09
testing, being able to generate assets.
-
12:12
Being able to, you know, generate documentation from your code.
-
12:15
It's able to help with all of these things.
-
12:17
And you can consider it an alternative to rake, cake, make, ants, there's
-
12:21
so many different options that people have been using for the past five years.
-
12:24
But to give you an idea of how much Grunt is
-
12:27
making a difference, over at Google on the Google Docs Team,
-
12:30
we recently also had had one of our sub teams that
-
12:33
were using all four of these options, switch up to using Grunt.
-
12:37
And it's now extremely easy for them to introduce anything, any other steps
-
12:40
into their workflow that they need with barely any effort, it's quite amazing.
-
12:44
They also saw some nice performance games in, in
-
12:46
the amount of time it took to build projects.
-
12:49
Now one of the really nice things I like
-
12:51
about Grunt, is that it has a huge plugin ecosystem.
-
12:54
So, you'll find that there's barely any task that you can
-
12:56
think of, that there isn't already a Grunt task written for.
-
12:59
And it's actually quite easy to write your own Grunt tasks.
-
13:01
I'll show you a Grunt task that I've been hacking on in a few minutes.
-
13:06
Grunt's fantastic for those who are developers, if
-
13:08
you're a designer, it's great for you too.
-
13:10
It actually has a minimal amount of set up that's required.
-
13:12
And there's really just two, two files that you
-
13:14
have to worry about, when you're working on Grunt.
-
13:16
There's a package.json file, and a Grunt file.
-
13:19
Now your package.json, file basically just contains a list of
-
13:24
Grunt plugins that you wanna use, as well as some metadata.
-
13:27
So, here you'll see that in the dependencies object within this file.
-
13:31
We have something that says, okay well, a specific version of Grunt is being used.
-
13:35
And I also want to include these two Grunt tasks.
-
13:38
Now the tasks are
-
13:38
called, grunt-contrib-jshint and grunt-contrib-uglify.
-
13:42
The contri part of this of this naming, actually
-
13:45
means that, the Grunt team themselves maintain that task.
-
13:49
And it means that you can generally assume,
-
13:50
it's gonna have fantastic documentation, great tasks, great support.
-
13:54
It doesn't mean, that you know, tasks written
-
13:56
by other people aren't gonna have those things, but,
-
13:57
it's just something that's, you know, it's nice
-
13:59
to know when you're starting off a new project.
-
14:02
And then you have your Gruntfile, which is
-
14:03
like a, a command center for everything going on.
-
14:05
And this is where you configure your tasks and you load in plugins.
-
14:10
So here, inside our Grunt initial configuration,
-
14:12
I have an object configuring my uglify
-
14:14
task, which is going to be able to handle things like minification of my scripts.
-
14:19
And all I'm saying is, for a target I'm calling Build.
-
14:23
And I can have lots of targets, I can have a target
-
14:25
for my development environment, where I'm just, you know, trying out things.
-
14:28
Another for my final production environment.
-
14:31
For that, I'm just specifying a source for where
-
14:33
I want it to go and look for my scripts.
-
14:36
And another where I want it to actually put the minified files.
-
14:39
It's simple enough.
-
14:41
And then we have some configuration for JSHint, now you can configure this as much
-
14:44
as you want, but, this is probably
-
14:46
the simplest amount of configuration you can specify.
-
14:49
Go and lint all of the all of the source files, in my project, and it'll do it.
-
14:55
At the bottom of this file we have three lines.
-
14:57
We have two lines at the top that include the words loadNpmTasks, which
-
15:01
will basically just load the tasks that you specified in your package.json file.
-
15:05
So, they can actually be used at the
-
15:06
command-line, and then we have another thing called registeredTask.
-
15:10
And this is a way of you grouping a number of different operations together.
-
15:14
Now in general, you'll see people have default task, a builD task.
-
15:17
And those will just sort of string together a number of different operations.
-
15:20
So things like your linting, your compression, and so on.
-
15:23
Now you install Grunt on the command-line using NPM, the Note Package Manager.
-
15:29
NPM doesn't actually stand for Note
-
15:31
Package Manager, it apparently stands for NPM.
-
15:33
I'm not sure how that works, but, there you go.
-
15:36
And then you npm install inside of your project to basically go and fetch any
-
15:41
of the dependencies that your Grunt tasks
-
15:43
need, as well as the Grunt tasks themselves.
-
15:45
And then when you run Grunts, it'll just go and run
-
15:48
those tasks inside of your project, and hopefully everything will pass okay.
-
15:52
If it doesn't, you'll get some feedback inside the terminal,
-
15:54
and you can go, and you can address those issues.
-
15:56
It's not too bad.
-
16:00
To install custom Grunt tasks, again you do this via command-line, you just run npm
-
16:04
install, generally speaking it's Grunt as for
-
16:07
the namespace, followed by the name of the
-
16:09
task, and you just pass in save dev at the end, to make sure that
-
16:12
it's saved to your package.json file, so you
-
16:14
don't have to manually wire that up yourself.
-
16:17
Now, there's some really fantastic Grunt tasks that I've been
-
16:20
using over the past few weeks, that I strongly recommend.
-
16:23
Now, increasingly, we're finding that the devices our users
-
16:25
are using, are not a laptop, it's one of these.
-
16:29
Now there's a few of different problems with these devices, mobiles.
-
16:32
They're using slower GPUs, slower CPUs, and our users
-
16:35
could potentially be using network connections which are quite slow.
-
16:40
Now, that's interesting because if you think about it according to
-
16:42
the HTTP archive, the average web page size is now 1.5 megabytes.
-
16:47
That sounds like a lot, and, what's even more
-
16:50
surprising is that most of that is actually images.
-
16:53
And so, having a strategy for optimizing images and, and over the
-
16:58
next year having a responsive images strategy Is gonna more and more important.
-
17:02
Now, Grunt responsive images.
-
17:04
I have set up bit.ly links for all this stuff.
-
17:06
You can check it out later.
-
17:07
Check it out now.
-
17:08
Grunt responsive images will actually just take a, a directory of images inside your
-
17:12
project, and it'll go and generate multiple
-
17:14
resolutions of them, for you, and so if
-
17:17
you, if you are, you know, if you happen to have a strategy in place
-
17:20
whether you are using SourceSet or a
-
17:23
polyfill library of some sort of a SourceSet.
-
17:25
You can actually say, okay, well if you're on a mobile
-
17:27
device, send me down a smaller picture with a [UNKNOWN] smaller size.
-
17:30
And that's a little bit more optimal.
-
17:33
So I love Grunt responsive images.
-
17:36
Now, because we're trying to keep our page weight
-
17:37
down as much as possible, I also love grunt-contrib-imageoptim.
-
17:41
Now this is a Grunt task, again run by the Grunt team and it's maintained
-
17:45
by the Grunt team, it's had a lot of input from the image processing community.
-
17:49
And it does a fantastic job picking out the best tools that are
-
17:52
available at the moment, for optimizing your JPEGs, your PNGs, your animated GIFs.
-
17:56
Absolutely everything.
-
17:59
So I'd check that out as well.
-
18:01
Now for people who might already be using Grunt, there are
-
18:03
two speed tips that I've got that you'll, you'll really, really appreciate.
-
18:08
The first is called grunt-concurrent.
-
18:10
Now this is a grunt task which will actually allow
-
18:12
you to run in parallel multiple tasks at the same time.
-
18:17
Now, they're gonna be some tasks things like, you know, compiling your
-
18:20
Sass and compiling your CoffeeScript, which
-
18:22
don't necessarily rely on each other.
-
18:24
And so, it actually makes sense to run these things in parallel.
-
18:28
And I've actually seen some teams I know that, TweetDeck
-
18:30
in the U.K. are currently looking at this stuff as well.
-
18:32
I've actually seen some teams manage to improve their build times by
-
18:36
anywhere up 60 or 70%, just dropping in this task and using it.
-
18:41
So check out grunt-concurrent.
-
18:43
Now grunt-newer is another useful speed speeding tip.
-
18:46
And what this does is, it, after you make, you know a first build of your project.
-
18:51
Let's say that, you know, maybe you're you know, maybe
-
18:54
you're using abstractions, maybe you're using a preprocessor and so on.
-
18:57
Maybe you're just, you know, concatenating and,
-
18:58
and minifying your scripts and, and styles.
-
19:01
Let's say that you've run that build one time.
-
19:03
Now, the next time that you run it, they're
-
19:05
gonna be some files that you haven't actually changed.
-
19:08
You may have actually changed one file.
-
19:10
And what grunt-newer will do, is it's only going to
-
19:13
run tasks against the files that changed since your last build.
-
19:17
And I've seen people get anywhere up to 40%
-
19:19
improvements in built time just by dropping this in.
-
19:21
It actually has a minimal amount of configuration required.
-
19:26
Now, this is sort of the first time I'm talking about this.
-
19:29
I've been hacking on this for the past few weeks.
-
19:31
This is a new Grunt task, called grunt-uncss, and, it's one of the
-
19:36
first Grunt tools that will allow you to remove unused CSS from your projects.
-
19:42
You can check it out at bit.ly/uncss, but, a few weeks ago
-
19:48
I saw the DNL Mayor had this tweet, where he said, you
-
19:51
know 1,186 rules of CSS are not being used by this current
-
19:55
page, when Bootstrap is used for convenience in overkill mood, mode sorry.
-
20:00
But, basically what he's saying is, that
-
20:03
most people are dropping, you know, things like
-
20:04
Bootstrap in to their projects, of any large
-
20:07
monolithic UI Framework, tend to not really realize.
-
20:10
The cost of using that in the long term, and
-
20:13
how much of it they're actually not using on their pages.
-
20:16
And I thought, that would be a really interesting problem to try automating.
-
20:21
Now what Dion was talking about, this this thing at the very top where he says 90%,
-
20:25
91% of CSS not used, is some output
-
20:28
that comes out of the Chrome DevTools Audits panel.
-
20:31
So the first thing you can do is, if, if you think that you have
-
20:33
and issue with too much unused CSS in your project is to go to the
-
20:36
Chrome DevTools, open up your page or your site, and go the the audits panel, start
-
20:41
recording, and it'll tell you how much unused CSS you have, in the current page.
-
20:47
So here you can see it says, you know, remove unused CSS tools at
-
20:50
the very bottom, 89% of CSS is not used by the current Bootstrap page.
-
20:54
Great.
-
20:56
So what my task does is let's say that you have a page using Bootstrap.
-
21:00
Or it could be your own in house UI framework.
-
21:03
Here's a multi page Bootstrap page I'm just going and I'm
-
21:06
running Grunt cuz I've configured it to use my new task.
-
21:09
And once it's completed running, I'm just gonna
-
21:12
go over to the production version of this site.
-
21:14
And as you can see, it looks the exact same.
-
21:16
I can actually go between multiple pages and it looks identical.
-
21:19
But the difference between what we had before
-
21:21
and what we have now, is quite astounding.
-
21:23
If we check out the total size of the CSS
-
21:26
in our original application, we see that it's 288 kilobytes.
-
21:30
We go and check this out, for the new build, and it's down to 40 kilobytes.
-
21:35
Imagine that saving, and this isn't just down to minification.
-
21:37
This is actually figuring out what CSS
-
21:39
selectors you aren't using in your project.
-
21:42
To give you another set of figures, that's taking down a
-
21:46
Bootstrap file that was 120 kilobytes in size, down to 11 kilobytes.
-
21:51
So, I hope that some people are going to find this task useful,
-
21:54
maybe it'll blow your mind, I don't know, but, check it out at bit.ly/uncss.
-
22:00
The next thing we're gonna talk about is Bower.
-
22:03
Now Bower is basically a package manager for the web.
-
22:06
And, what that means is that in addition to sort of running over
-
22:09
a number of different protocols, it removes this old way of doing things.
-
22:13
So we're all used to this, this, this set of steps.
-
22:15
We figure out oh, hey, wait a minute I've got
-
22:17
a dependency in my project that's six months out of date.
-
22:20
It's got some security loopholes.
-
22:22
I probably wanna fix that.
-
22:23
I have to go and I have to open up the site,
-
22:25
download the livery, copy it from
-
22:27
my downloads directory over into my application.
-
22:30
Paste it in there, and then wire it
-
22:32
up with script tags if the version numbers changed.
-
22:35
What if we could actually automate a lot of that?
-
22:37
Now the new hotness is using Bower.
-
22:39
And you can install it using npm install-g bower.
-
22:44
You can then use bower search as
-
22:45
your discoverability mechanism for finding new libraries.
-
22:48
You don't have to actually go and open up websites anymore.
-
22:51
So let's say I wanted to go and
-
22:52
find AngularJS, and have Bower manage it for me.
-
22:55
I just type in bower search angular.
-
22:58
And as you can see, we get back as, a list of results.
-
23:00
I've, I've sort of truncated this list because it's a slide.
-
23:03
But there are hundreds of results that show up.
-
23:05
At the very top we have, you know, a popular package.
-
23:08
So angular, the actual library itself.
-
23:10
Below, we have a tone of different Angular directives and plugins.
-
23:14
And things that you can go and extend your project with.
-
23:17
Now one of the nice things is if we actually go and install angular, and
-
23:21
we can again pass in save-dev to, to have it saved into our local configuration.
-
23:25
It'll actually install that in a local directory for us.
-
23:28
And if our dependency happens to have other dependencies, so, let's say
-
23:32
they were trying to install, you know maybe, backbone or, or jQuery UI.
-
23:36
It'll actually automatically figure out, oh wait.
-
23:39
So that package has a dependency called jQuery.
-
23:43
So jQuery UI relies on jQuery.
-
23:45
How about I go and fetch the latest compatible version of that
-
23:47
package for you, so you don't have to worry about doing it yourself?
-
23:51
It'll just go and it'll install it locally,
-
23:52
and you can start using it right away.
-
23:55
Now, bower install actually supports a number of different options.
-
23:58
You can pass in version numbers.
-
23:59
You can override, you know, the, the place
-
24:02
where you actually want to install the package from.
-
24:03
You can install from a, a CDN if you want, for example.
-
24:08
And you also have access to a command called bower list, which is
-
24:11
usefully for actually listing out the
-
24:13
different dependencies you have in your projects.
-
24:15
So here you can see I've got a project where I've got Angular, Bootstrap jQuery.
-
24:19
And in blue, take a look at that, that's actually quite interesting.
-
24:23
In blue you'll say that latest on a, on the angular dependency is 1.2.0.rc3.
-
24:31
Now, you know, you might be wondering, well, why didn't it, didn't it
-
24:33
install the latest version for me, instead of installing the version that's in white?
-
24:37
Well, the version in white is the current stable on Bower.
-
24:41
If you want, you can actually override the stable
-
24:43
version being installed, and install the latest release candidate instead.
-
24:47
But, we try to prescribe best practices there and say you should be
-
24:50
using a stable version, unless you absolutely
-
24:52
want to be using something [INAUDIBLE] edge.
-
24:55
You can even go and wire up dependencies from the command-line.
-
24:58
So Bower as a package manager, manager doesn't do this for you.
-
25:02
But if you wanted, you could actually go
-
25:03
in and use a Grunt task called grunt-bower-install.
-
25:08
And this will allow you to wire up dependencies that you've installed
-
25:11
from Bower, up into your index files, or up into your templates.
-
25:14
So the way this works, is that, once you've installed it into your project.
-
25:19
You got and you use Bower to install any of the dependencies that you might need.
-
25:23
And then you just run grunt bower-install.
-
25:26
And it'll do all the rest of the work for you.
-
25:28
It'll figure out where your dependencies are, inside your application, and
-
25:32
it'll script and wire them up, no more script tags for you.
-
25:36
Saves you time.
-
25:37
So if you wanna go and check out Bower you can find more at bower.io.
-
25:42
You'll also be interested to take a look at bowersearch.
-
25:46
So this isn't, I believe this is li, linked somewhere on
-
25:48
the Bower homepage, but bower search is basically like a site
-
25:52
a little bit similar to npmjs.org where you can go and
-
25:56
use a, you know, use a gooey to locate Bower components.
-
26:00
It's a really great discoverability mechanism, it'll list out the hot
-
26:03
components of the day, and a number of other useful things.
-
26:06
So that might be interesting to check out as well.
-
26:08
And then we have Yo.
-
26:10
And for people who haven't really played around with Grunt or Bower before
-
26:14
and still feel that it's a little bit too much to get started with
-
26:18
and, and you know, a little bit too much to start learning, Yeoman
-
26:21
is a little bit like your gateway into this magical new world of tooling.
-
26:25
So some of the things it does, is it
-
26:27
will actually scaffold you out the boilerplate for a project.
-
26:30
So if you're working on a new Angular app, it'll scaffold you
-
26:33
out the basic project that you need to start actually building something useful.
-
26:36
It can scaffold out static sites, scaffold
-
26:39
out Bootstrap sites, and all sorts of things.
-
26:42
Yeoman also prescribes useful Grunt tasks, depending
-
26:45
on the type of application you're building.
-
26:47
So if we think that there's a Grunt task that'll
-
26:49
benefit someone using a framework like Ember, or something like Backbone.
-
26:54
We''ll give it to you without you having
-
26:55
skill and manually find it and install it yourself.
-
26:58
We'll also set up all the configuration for, for you.
-
27:01
And we can also automatically install all
-
27:03
the dependencies needed for a project using Bower.
-
27:06
So if, you know, at the command-line you say when we
-
27:08
are trying to, to create a new project, hey, well I'd actually
-
27:11
like to use, you know, jQuery or Modernizr, orsomething like that,
-
27:14
we'll install it for you, you don't have to do anything else.
-
27:18
I think it's pretty awesome, but to install Yeoman once again we use npm.
-
27:23
And the idea is just to, npm installed G and Yo.
-
27:27
Because we're trying to simplify your workflow as much as
-
27:29
possible, we'll actually install both Yeoman, Grunt and Bower for you.
-
27:34
You don't have to install these tools separately.
-
27:38
Now once you run Yeoman for the first time, we actually give you a wizard.
-
27:41
So, the Yeoman idea is that we wanna make it
-
27:44
very easy for beginners to be able to get started
-
27:46
with projects, and make it easy for people who are
-
27:49
slightly beyond that point, to scaffold out projects as well.
-
27:52
So, here we've got a wizard, where it's saying, well, what would you like to do?
-
27:55
I've got a number of generators already pre-installed here.
-
27:58
I've got an Angular one, a Backbone one, one for creating new jQuery plugins.
-
28:02
But, because I'm starting off afresh, let's
-
28:04
say that I just wanna install a generator.
-
28:06
So I just hit Enter on Install a Generator.
-
28:08
And then it'll ask me, well, would you
-
28:10
like to search NPM for any Yeamon generators?
-
28:12
And I say yep, well yeah, sure.
-
28:14
I'd like to search for something I can do with jQuery.
-
28:18
And, it'll tell me if it found one, and give me a list of options.
-
28:21
So in this case, it's saying, well, there's
-
28:23
a few different generators for jQuery projects available.
-
28:26
One for jQuery boilerplate.
-
28:28
And other for jQuery mobile projects.
-
28:30
And when you run yo jquery-boilerplate.
-
28:33
This is from the simplest generator that's available.
-
28:36
It'll scaffold you out a new jQuery plugin.
-
28:39
Notice that it's created you a Gruntfile and a
-
28:41
package.json file, without you having to do anything yourself.
-
28:45
So you can go into this project, and you can just run Grunt.
-
28:48
And it'll already have the configuration setup.
-
28:50
Now, this is a very stupid simple project.
-
28:53
But you just created a jQuery plugin that way.
-
28:56
Now for most people, you probably wanna be installing custom generators.
-
29:00
And the way to do this, is running npm install.
-
29:03
And for Yeoman generators, we have a name space called just generator dash.
-
29:07
And the idea here is that I'm trying to install
-
29:09
a generator, generator for helping me with my Bootstrap projects.
-
29:13
Again, this is a very simple one.
-
29:15
Once I have it installed, I just go and run, yo bootstrap.
-
29:18
And in this case, it'll give me a prompt,
-
29:20
asking me, what format I'd like those Bootstrap CSS in.
-
29:24
Would I like it in Sass, Less, Stylus?
-
29:27
Now, I find this useful, because, I never know what [INAUDIBLE] of
-
29:30
Twitter Bootstrap to actually go use if I'm working with a pre-processor.
-
29:33
And in this case, I just run one thing at the command-line.
-
29:37
And it'll go off to Bower and fetch the latest version of
-
29:39
one of these dependencies for me, without me having to work on anything.
-
29:43
For most people in this room, you're probably gonna be working on some
-
29:46
sort of web application, and so we have a dedicated generator for web apps.
-
29:50
It's called generator-webapp.
-
29:52
Now, once you have this installed, you just run it,
-
29:55
using Yo web app, and it'll ask you a few questions.
-
29:58
So, out of the box, I include HTML5, Boilerplate, and jQuery.
-
30:01
What else would you like?
-
30:03
So, it's gonna ask you three questions.
-
30:04
Would you like Bootstrap for Sass, RequireJS and Modernizr.
-
30:07
Now you might think well, all this is
-
30:09
gonna do for me is just install three libraries.
-
30:11
I can just go do that in my browser myself and, and not have to
-
30:14
use any of these tools, but there's a
-
30:15
little bit more going on behind the scenes.
-
30:18
If you select Modernizr here, we're actually gonna set
-
30:20
up another Grunt task called Grunt Modernizr for you.
-
30:23
And what that will do, is at build
-
30:26
time it'll actually go through your entire project,
-
30:29
figure out what feature detects in Modernizr you're
-
30:32
using, and it'll strip out absolutely everything else.
-
30:35
So you don't end up shipping one big library
-
30:37
to your users, you just ship the smallest thing possible.
-
30:41
And we set up all the configuration for that.
-
30:43
If you select RequireJS, in addition to installing RequireJS, we'll
-
30:47
actually set you up some unit tests that you can use.
-
30:50
We'll set you up with some scaffolding you can use.
-
30:52
You don't have to configure your RequireJS paths or anything like that.
-
30:57
And we'll also set you up RJS, the RequireJS optimizer.
-
31:00
So you can actually use it at build time for compiling parts of your projects.
-
31:05
And with Bootstrap for Sass in addition to RequireJS not
-
31:09
only do we set you up everything you need to
-
31:11
compile your abstraction, we'll also make it easy for you
-
31:14
to just go into your editor, after its scaffolded this out.
-
31:18
You can run a new server, and any change that
-
31:20
you make inside your editor, will cause the browser to refresh.
-
31:23
So, you have this nice real time view of what's going on.
-
31:27
This is what we scaffold out.
-
31:28
It's extremely basic, and in this case, I just selected
-
31:30
some of those options, but what it creates for you and
-
31:33
what it gives you, is same boilerplates that you can
-
31:36
go and start working on, the ability to easily use abstractions.
-
31:40
I don't have to go and worry about setting up any
-
31:42
sort of workflow or bill process form my Sass or my CoffeeScript.
-
31:45
I get instant access to grunt bower-install.
-
31:48
I get best practices for performance optimization by default.
-
31:52
So, it will automatically be
-
31:54
using grunt-contrib-imagemin to minify your images.
-
31:57
They'll already have things like script concatenation
-
32:00
and CSS concatenation set up for you.
-
32:02
It'll also use grunt-modernizr as I was
-
32:04
saying, you know, run all those tasks concurrently.
-
32:08
Out of the box, you also get a nice test setup as well, so you can use Mocha.
-
32:13
You can use Jasmine [UNKNOWN] JS.
-
32:15
Now, even if your takeaway from today is, you know, this stuff
-
32:19
is just way too much for me, I'm doing something much simpler.
-
32:22
But, I'm interested in the idea of using Grunt
-
32:24
in my projects, I've heard some great things about it.
-
32:27
You can always go and learn how to get some best
-
32:30
practices into your own projects by studying the Yeoman Grunt file.
-
32:34
We do some really, really interesting things in there.
-
32:36
Things that will save you time having to sort of configure your projects and
-
32:40
get started with some of these other tasks that can save you time at Build.
-
32:44
Now when you run Grunt server inside a new Yeoman
-
32:47
project, what we give you is the ability to LiveReload.
-
32:50
So, here I have a project that I've scaffolded out,
-
32:53
and, I can go into my editor, makes changes, and
-
32:55
say, you know, maybe I can change the title to
-
32:57
who is your daddy and, and what does he do?
-
32:59
Now as soon as I save, it'll actually refresh the browser; so,
-
33:03
I have this nice, consistent view of the state of my application.
-
33:07
What's even better, is that with minimal configuration, you can also change this.
-
33:12
So that you're able to get cross device live reloading.
-
33:15
So this is my workflow.
-
33:16
This is my desk at work.
-
33:18
I have to test and make sure that my apps work great on a number of devices.
-
33:22
And I'm able to actually have them just listed all around me, just surrounding me.
-
33:25
And, I load this up once on each browser on each of my devices.
-
33:29
It's the, you know, whatever browser I want.
-
33:30
Whether it's Chrome for Android or Firefox OS, or whatever have you.
-
33:35
I can start making changes on my desktop, and see my desktop browser refresh, but
-
33:40
I can also see what those changes look
-
33:42
like instantly on all of my target devices.
-
33:45
Now the amazing thing about this, is that because we all care about
-
33:48
mobile, and we wanna be able to deliver experiences that work great everywhere.
-
33:52
You can instantly catch regressions that look, you know, crappy on
-
33:55
those devices earlier on, rather than looking at this stuff later.
-
33:58
If you wanna check out how to set
-
34:00
this up for a Grunt project, it's bit.ly/gruntsync.
-
34:03
And what about framework?
-
34:05
So, I was talking about Angular a little bit earlier.
-
34:07
Now, in Yeoman, we have a generator for Angular.
-
34:10
So, once you install it, just run yo angular and it'll ask
-
34:14
you a few questions once again, like would you like to include Bootstrap?
-
34:16
Would you like the SCSS version?
-
34:18
And also, would you like specific modules related to Angular?
-
34:21
So things like resource, cookies and sanitize.
-
34:24
What this gives you out of the box, is actually not just sort
-
34:27
of a default application you can go and build on, but it gives you
-
34:31
a complete set up using Karma, and all of the best practices that the
-
34:34
Angular JS team think that you should be using a day to day basis.
-
34:38
We work quite closely with the Angular team.
-
34:39
We actually have a member of the Angular team on the
-
34:41
Yeoman team and it's currently recommend as their default tooling of choice.
-
34:46
Now you can also scaffold out smaller pieces of
-
34:48
an application using Yeomen using something we called sub-generators.
-
34:53
And the idea is, if you wanna go and create a new view,
-
34:56
or a new model, or a controller, why not do that from the command-line?
-
35:00
Why not have the boilerplate for those smaller pieces done out for you?
-
35:03
So here I'm able to scaffold out a new view.
-
35:05
Or a new directive.
-
35:07
Or go and install something from Bower instantly.
-
35:09
And it'll all just work out nicely together.
-
35:12
So you can easily create Angular apps with dependencies
-
35:14
without having to, to worry about any of that boilerplate.
-
35:17
Now, the Yeomen community is actually growing at a pretty nice pace.
-
35:21
We have an increasing number of people that
-
35:23
are trying to use it for full stack development.
-
35:27
So, here's my vision for Yeomen, I would like you to be able to
-
35:30
go and say well, here are the four things I wanna use in my stack.
-
35:33
Maybe I wanna go and use Mongo.
-
35:35
Maybe I wanna Angular.
-
35:37
Maybe I wanna use Express.
-
35:38
Maybe I wanna use Node.
-
35:39
Maybe I wanna use other things.
-
35:41
One line at the command-line, will give you all
-
35:43
of the setup you need, to go and develop things.
-
35:46
That's the direction that we're moving in.
-
35:47
I wanna make it very, very easy for you to get
-
35:49
it setup so that you can go and work on a project.
-
35:51
So there's generator that I'll do that.
-
35:53
There's a Yeomen generator for Jekyll.
-
35:55
Another for creating Chrome extensions.
-
35:58
And recently we actually put together a
-
36:00
Yeomen generator for creating mobile first projects.
-
36:03
So for people that want to be able to say use
-
36:06
foundation or top coat, or any of those other UI frameworks.
-
36:10
And also have sort of integration, with cloud device testing.
-
36:13
So services like BrowserStack.
-
36:15
We have a generator that can help you get started with this stuff.
-
36:19
For more on that, check out yeoman.io.
-
36:21
We also have a generator search available on the site where you can
-
36:24
go and find out all of the other generators that people work on.
-
36:27
And if you're looking for demo apps built with
-
36:31
Yeoman you can actually check those out at bit.ly/yeomandemo.
-
36:34
Now there's four small apps built there using the project.
-
36:38
But, it'll give you a very quick way to take
-
36:40
a look at some of the stuff in our Grunt file.
-
36:42
Without you having to go and install any of this stuff.
-
36:46
But the idea behind Yeoman and the three tools that
-
36:48
I presented there, was work less, do more, and make awesome.
-
36:52
And, you know, if any of you do end up trying out
-
36:55
these tools, and you have questions, please feel free to let me know.
-
36:57
We're always trying to improve the tooling chain as much as possible.
-
37:02
Now, with the time I have left, I'd like to talk a
-
37:04
little bit more about how you can improve the rest of your workflow.
-
37:08
So let's say that, you know, let's for argument's sake say
-
37:10
that nothing I've shown you so far has been useful to you.
-
37:12
Let's say that there's other things in
-
37:14
your workflow that you could use help with.
-
37:16
Well let's talk about some of that.
-
37:18
I believe in learning to love the command-line.
-
37:20
I know that some people here are already gonna be quite familiar with it.
-
37:23
But for those who, who aren't convinced that its worth spending your time on one
-
37:27
thing that I found really automates my
-
37:29
workflow, is the ability to script common tasks.
-
37:32
So I spend time reviewing things that I do on a day
-
37:35
to day basis, that I could potentially just move into a script.
-
37:38
And that way I can just have the script take care of that process for me.
-
37:41
And a lot of the times I end up putting this stuff
-
37:43
into my dot files, which you can consider, if you, if you aren't
-
37:45
already familiar with it, as a default set of of ways to do
-
37:49
things, of functions, of aliases that you can move on, onto any box.
-
37:53
So some of my favorite things to use dot files for
-
37:56
are sort of this alias for starting up a new server inside
-
37:59
my project, so I go into any directory, start up server,
-
38:02
and I can use it to just go and preview the application.
-
38:05
I noticed the other day that something I was doing,
-
38:08
when I was working with GitHub, was going off, coding your
-
38:12
repository, waiting for it to finish, CD-ing into that project, and
-
38:17
then opening up Sublime so I can actually edit on it.
-
38:20
So I figured, well, why not try automating that process.
-
38:24
And that's what gave me Clone.
-
38:25
So Clone is a function which will take care of those steps for me.
-
38:28
I just type in Clone, and then the name of a repository on my account.
-
38:32
And then it'll go, and it will get it for me.
-
38:34
If I type in Clone, and someone else's name, and their
-
38:37
repository, without having to type in any of the other GitHub stuff.
-
38:40
It will script that for me.
-
38:41
So there's little things to do to automate your workflow.
-
38:44
I use iturn2 a lot and it's got this really great replay feature.
-
38:48
That'll record all of your interactions with the command-line over time.
-
38:52
You can just use this, this bar at the
-
38:54
bottom to sort of scroll back and forth through
-
38:56
time and figure out where you're actually spending a
-
38:58
lot of time in your day to day workflow.
-
39:00
[UNKNOWN] magic on Twitter are a fantastic resource to check out.
-
39:04
If you're trying to learn more about the
-
39:05
command-line, they've got amazing pro tips there every day.
-
39:08
And, I'm constantly blown away with some of the stuff that they recommend.
-
39:11
Now, there are worse things than working on the command-line.
-
39:15
I was, I was playing around with this CSS jigsaw puzzle the other day.
-
39:20
I thought it was pretty neat.
-
39:21
I thought, you know, yeah, I'm gonna spend an hour trying to,
-
39:24
to solve this and figure it out and, and see how this works.
-
39:26
But when you solve this, do you know what it says?
-
39:28
It says go outside, which I probably you need to do more.
-
39:33
But there are also tools that can help you do things more quickly.
-
39:36
Another one that I use more commonly is Alfred.
-
39:38
Alfred is a Mac only app.
-
39:40
I'm sorry Windows guys, but I do an alternative for you soon.
-
39:43
Alfred is a great app for being able to find things very
-
39:45
quickly, and my friends at [UNKNOWN]
-
39:48
recently put together a site called alfredworkflows.
-
39:51
It's a GitHub repository.
-
39:52
But it basically captures a ton of new stuff that you can use Alfred for.
-
39:57
So, things like being able to easily find packages on npm.
-
40:00
So, I can just run a quick set of short cuts and be able
-
40:04
to find anything on npm without even having to go back to the browser.
-
40:07
If I want to go and find Grunt tasks, I can do that from Alfred.
-
40:11
I can still be inside my editor and just run Alfred and do that.
-
40:15
If I want to go and do a browser compatibility
-
40:17
search on some API that I wanna use, or some
-
40:19
method, this can call out to can I use, and
-
40:22
in the exact same window show me results from it.
-
40:25
It can find you documentation on dash, and
-
40:27
show you results from things like Font Awesome.
-
40:29
So Alfred [INAUDIBLE] workflows are, are really, really
-
40:32
powerful, and I recommend you trying those out.
-
40:35
Now, again, for people who are in Windows.
-
40:36
There is a similar tool called Launchy, you might be interested in checking out.
-
40:40
It's not as featureful as Alfred is, but it'll get you a little bit of the way.
-
40:45
Automator is another great tool, if you're on Mac.
-
40:48
It can help you sort of script system operations,
-
40:50
like being able to select files, and have them.
-
40:53
Convert to a specific format with certain settings.
-
40:56
On Windows, check out Macro Recorder for that.
-
41:00
Now I'm running out of time and so, what I'm
-
41:04
going to do is, I'm gonna show you one or
-
41:06
two things really quickly and then I'm gonna announce some
-
41:09
new Chrome DevTools features, that you might be interested in seeing.
-
41:12
We haven't actually announced them anywhere else before.
-
41:14
Now, another thing that I think people need to care more about.
-
41:17
Is their text editor.
-
41:19
You spend the most time in your editor creating things,
-
41:22
and so it absolutely makes sense to know it inside out.
-
41:25
Consider it an onion application, where you keep peeling
-
41:28
back the layers to learn about new functionality that's available.
-
41:31
Some of the things that I've been using a lot are shortcuts.
-
41:34
And these specific Sublime packages.
-
41:36
So Sublime Autoprefixer is amazing.
-
41:39
If you happen to hate working with
-
41:41
prefixes, this will solve all of your problems.
-
41:43
You can be writing any of your style sheets
-
41:45
just using, you know, no vendor prefixes, and Sublime Automator,
-
41:49
sorry, Autoprefixer, will automatically write those in for you, so
-
41:53
you don't have to do [UNKNOWN] bother doing that yourself.
-
41:56
Another really interesting package is Emmet.
-
41:58
Now Emmet is sort of the replacement to Zen Coding.
-
42:02
And the idea here is that just using a few key
-
42:04
strokes, you can actually define complete blocks of markup that you want.
-
42:08
So here you have to find a complete list, and
-
42:10
if I wanted to, I can say okay, well I wanna
-
42:12
create a complete list with nine items, and maybe that
-
42:15
will also include a link of some sort with an image.
-
42:19
And so I can just say, okay well, create me an A Yeoman with an image.
-
42:23
And there we go.
-
42:25
That's a really nice time saver, and if you learned all the shortcuts off, you
-
42:29
could then use multiple cursors to actually start
-
42:31
writing code in, and saving yourself some time.
-
42:35
STProjectMaker is something that barely anyone knows
-
42:37
about, but this is a new Sublime project.
-
42:40
That basically helps you with templates.
-
42:42
So let's say that you know, you feel like Yeoman and Grunt
-
42:44
and all of that other stuff is a little bit too heavy.
-
42:47
It's not, but let's say you think that.
-
42:50
And let's say that maybe instead there are a smaller
-
42:52
little set of files that you always find yourself using.
-
42:55
When you're creating a new app or a new site.
-
42:57
With the STProjectMaker, you can just tell it, well, this
-
43:00
is the boilerplate I usually use and give it a name.
-
43:02
And then inside Sublime, any time you wanna create a new project, you can
-
43:05
just go to a menu and select
-
43:07
which boilerplate you wanna use, it's incredibly powerful.
-
43:10
So bit.ly/stprojectmaker is, is the place to go to for that.
-
43:15
Sublime TernJS is a Sublime plugin for a
-
43:18
project by Martin Ha Hammerbeak who I think
-
43:21
wrote eloquent JavaScripts, but the basic idea there
-
43:24
is it gives you much better code completion.
-
43:27
So Tern is able to properly analyze your
-
43:29
code and understand it better, and give you smarter
-
43:32
decisions when it comes to being able to
-
43:34
auto-complete things when you're working inside of your editor.
-
43:37
The Sublime Build System is something not enough people use it
-
43:40
actually can call out to any tool that you want, including Grunt.
-
43:44
So if you wanted to stay in your editor, and go and call off to your bill process.
-
43:48
You can easily script this.
-
43:50
So check that out as well.
-
43:51
I'm gonna skip over sublime-linter.
-
43:53
But the nice thing about this, is that I'm able
-
43:55
to get instant feedback while I'm working in my editor.
-
43:57
Anytime that I make a mistake.
-
43:59
And this means that I don't have to worry about
-
44:01
going back to my bill process to do it later on.
-
44:04
So, how about we announce some new things that are in the Chrome DevTools?
-
44:09
One thing we've been working on a lot lately, is the
-
44:11
idea of improving your ability to edit directly inside the browser.
-
44:15
I'm not gonna say the DevTools are now and IDE, but we're
-
44:18
now a much more powerful editor for being able to do things.
-
44:21
Now the first thing we've introduced recently is this concept of work spaces.
-
44:26
So let's say you're working on a new project.
-
44:28
And you'd like to be able to actually edit and debug it inside of DevTools.
-
44:31
With work spaces, you just select that project on
-
44:34
your directory in your In your, in your system.
-
44:37
Add it as a local work space.
-
44:39
And it'll then show up directly inside the
-
44:41
sources panel, any time that you open up DevTools.
-
44:44
Now you can do pretty much anything with this.
-
44:45
It will give you Syntax highlighting.
-
44:47
It'll give you the ability to go and set breakpoints directly
-
44:50
inside your code, and, if you happen to go and close
-
44:53
the DevTools, and you close Chrome, we'll actually save all of
-
44:56
your breakpoints for any of the files that you've been working on.
-
44:59
So, you can return back to the exact same state that you were working on before.
-
45:01
So, that's great.
-
45:04
First new feature, is the ability to create new files.
-
45:07
Chrome DevTools in Canary is the first browser to
-
45:10
actually give you the ability to create new files.
-
45:12
I know it's a really stupid simple thing, but I've
-
45:14
been campaigning to get this in for a year now.
-
45:16
But this lets you create new files inside your applications.
-
45:19
You can actually do complete application development inside the tools.
-
45:23
You can get access to a complete debugger.
-
45:25
You don't have to worry about hopping back
-
45:26
and forth between your text editor and the browser.
-
45:29
So this lets you create new files, with
-
45:31
Syntax highlighting for pretty much anything you can imagine.
-
45:33
Regardless whether it's JavaScript, PHP, Rails, it's all supported.
-
45:38
Now, awhile back we added support for Sass Source Maps,
-
45:41
and the idea there was, lets say that you know.
-
45:44
You love working with Sass, and when you compile
-
45:47
your CSS, you end up previewing it in the browser.
-
45:49
And then you realize oh, wait I, I'd like to make some changes there.
-
45:52
Well, with Sass Source Maps, you could basically go into the elements panel.
-
45:56
And, rather than just seeing the line numbers for your CSS.
-
45:58
You see the line numbers for your original Sass Source Files.
-
46:02
So you could quick threat back straight through to
-
46:05
them, and be able to edit your Sass directly
-
46:07
inside of DevTools, and see it refresh inside of
-
46:09
Chrome whereas Sass compilier is are running in the background.
-
46:13
The next new thing that's avaliable is support for less.
-
46:16
So you can now use Less Source Maps inside of the DevTools.
-
46:19
So, the exact same way that this works with Sass
-
46:22
you can be previewing your project using Less, and as long
-
46:24
as you have Source Maps turned on, you can actually
-
46:27
click through, and go and start editing your Less Source Files.
-
46:30
It's quite nice.
-
46:31
Another thing we added a few weeks ago, is the ability to CSS pretty-print.
-
46:35
Let's say that you've been given a project to check out by somebody else.
-
46:39
Maybe it's an agency, maybe someone just wants you to review their code.
-
46:43
Well, for the longest time we've supported
-
46:45
the ability to go and pretty-print JavaScript.
-
46:48
So you just go inside the source's panel, you click a little
-
46:51
curly brace icon at the very bottom, and we'll pretty-print your JavaScript.
-
46:54
That's now supported for CSS as well.
-
46:58
This is ridiculous because we've, we've had features that have, you know,
-
47:01
been worked on for six months and yet, this got like 600 retweets.
-
47:04
I don't understand it.
-
47:07
Another new feature that we've just added in
-
47:08
Canary, is the ability to ignore library code.
-
47:11
So let's say that you're debugging an application.
-
47:14
Maybe it's using a framework of some sort.
-
47:16
Maybe you're using jQuery.
-
47:17
Maybe you're using Backbone or Angular.
-
47:19
Now one thing that you might run into, is
-
47:21
that, you run into an exception or an error and
-
47:24
be thrown directly back inside the library, rather than
-
47:27
the position in your code where the error originated from.
-
47:29
And that's a pain.
-
47:31
If you, if you happen to be using DevTools,
-
47:32
you've most likely run into this at some point.
-
47:35
Now, with the ability to ignore a library code, and
-
47:38
this is in Canary once again and it's, it's an, experiment.
-
47:40
Enable framework debugging support, add in a new
-
47:43
pattern, so here I'm adding in the pattern jQuery.
-
47:46
And then, when you're actually getting those exceptions,
-
47:48
they'll be shown up as being from your code.
-
47:51
It'll take you to the line in your code
-
47:52
where the exception actually originated from, rather than the library.
-
47:57
And lastly.
-
47:58
And this is the thing that's blown my mind the most.
-
48:02
You can now actually access the terminal, directly inside of Chrome.
-
48:06
There's a new DevTools extension called DevTools terminal, that will let you
-
48:10
get access to anything you can with the command-line, directly inside of Chrome.
-
48:14
So if you want to access Bower, you wanna access Grunt, you wannaaccess [UNKNOWN]
-
48:19
or NPM, or anything else, you can now do that inside of the Chrome DevTools.
-
48:24
So here you can see I did a Bower search
-
48:25
for something, and I got all of my results back.
-
48:28
It'll also preserve line coloring if you happen to
-
48:30
have configuration setup for whatever your terminal of choice is.
-
48:35
This is something that's completely brand new.
-
48:37
This is gonna change your workflow, cuz it
-
48:39
will mean that you're able to get access to
-
48:41
a complete debugger that works for the V8, a
-
48:43
complete editor that can do anything, and the terminal.
-
48:47
Inside one place.
-
48:48
So, you can do all sorts of things with this, if you
-
48:51
wanted to, you could so the way that you set this up is
-
48:54
you connect to the local host, you can then get access to all
-
48:57
the file system commands, you can
-
48:58
be creating pages directly inside the terminal.
-
49:01
You can go and check this out at
-
49:02
bit.ly/devtools-terminal, it's amazing and it will change your workflow.
-
49:08
So with that, that's the end of me.
-
49:10
I'm hoping that this is you at this point, I know it's late in the day.
-
49:14
If you aren't using automation, you're working too hard.
-
49:17
And please at least consider the, the little
-
49:19
things that you can do improve your workflow.
-
49:22
Use tools not rules.
-
49:24
We tend to hang ourselves up on actually saying well, you
-
49:27
know, you should care about performance, you should be using these tools.
-
49:30
Try to figure out the tools that make
-
49:31
sense for you, and will actually benefit your workflow.
-
49:34
Improve your developer happiness.
-
49:38
And with that, thank you, and please party on.
-
49:41
[SOUND]
You need to sign up for Treehouse in order to download course files.
Sign up