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