 Well, today we're going to do an episode about tools. Tools. Big surprise. But this is going to be a roundup of some of the tools that we've been using that we've kind of discovered in 2017 and things we are still using today. All right, let's take a look. All I want for Christmas is a new tab key because my tab key broke. But you now get to skip the whole tab sources spaces argument because you can only use spaces, which is the right choice. Yes. Moving on. So we've been using visual code quite a lot, quite a lot in our team over the last year. I love it for its configurability, really, really decent performance as well. And it's got this kind of huge ecosystem of plugins. So many plugins. Yes, but they're also adding a ton of new features. So let's start off with the first plug-in, import cost. Import cost. Import cost is really nice because whenever you're requiring or importing in a module, inline it will show you exactly what the size of that module is going to be, including like the GZIP size. Nice. Really useful for evaluating whether the cost of that thing is going to be. And plus, with low-dash where you could import all of low-dash versus import a particular function, you can actually see the size difference, which is really nice, especially as we start using ES2015 modules. Exactly. Next up, we've got inline GITDIF. And this is baked into VS code, and it's super helpful. Basically, if you have anything like a merge conflict, it really nicely highlights everything and gives you a set of options that relate to it so you could select, like, oh, OK, I want the latest from the remote branch versus what I've got here. And it's just a really nice feature. I've been using this a lot lately. Another really big feature that landed this year was support for leveraging some of VS code's type checking features in regular JavaScript, just by opting in using this TS check comment. And this is using the js.comments, right? So it can infer from what it knows from the js.comments that the types of variables and figure out if what you're calling, passing in, or getting out is actually what you expect and call out any problems. And we're using this over on the Lighthouse team as well. It's pretty cool. Nice. Next up, let's talk about bundling. So we've been using Babel quite a lot for pretty much everything, right? Something I've been using lately is the inverse of Babel, libab.io. And what this allows you to do is convert your existing ES5 code to ES2015 plus. How good is this? It's pretty all right. So it's been especially good for converting code over to classes, arrow functions, things like that. I found the margin of error to be relatively small, like the number of tweaks that I have to go in and kind of. If you've got a big enough code base to be doing this, that actually an automated tool would help humongously just to get in there quickly. Yeah, really good. Babel preset n is another thing we've been using a lot lately. Yeah, so back in the day, you'd used to use Babel when it would convert everything to polyfills or code that would run in older browsers. Babel preset n, if you define what browser support you want, so you could say Chrome and I want the last two versions. And the nice thing with this is it would just compile the things that actually needed to be changed rather than everything. Exactly. Looks a little bit like this. We've got you covered for both ways to pronounce Babel as well. I pronounce it Babel and pronounce it Babel. Sam Saccone told me how to do this and I've already forgotten. It's okay, you're both wrong. Yes. Webpack. So Webpack has been pretty popular over this last year. Continuous gain and popularity. Webpack 3 came out. One of the nice features that it included was a feature called scope hoisting. Sounds fun. Sounds great. So in earlier versions of Webpack, when you were working with modules, it would wrap those functions, it would wrap them into functions that isolated the scope of those modules. Imports would get translated into variables that would hold the result of Webpack require function. And what Webpack 3 is able to do using the module concatenation plugin is basically flatten those import chains and on the whole reduce the size of the bundles that it's generating. One of the nice things about this is that for production apps like Tinder, they were able to use this and actually reduce parsing time by 8% for their like JavaScript bundles. So they actually got a file size reduction and a parsing time reduction as well. Which is super awesome. Super awesome. Except we've got DevTools. Always evolving. We've provided those DevTools. This year, one of the bigger things that landed was support for the Lighthouse. It's actually baked into DevTools now, which is really nice. Yes it is. And it's available in Chrome stable. So if you wanna do performance audits, accessibility audits, best practice audits, all of it's available. Everything's in there. Code coverage, so what's this? So basically as you load up your web page, pull in a ton of JavaScript, code coverage would then say, okay, this is the amount of JavaScript you actually used versus the amount of stuff that isn't used. Now the nice thing with this is if you start interacting with the page, the code coverage actually starts changing. So let's say you had a login flow that was super important to your website, you would actually wanna sit there and log in and then see how much of the code was used and how much it was remaining after that. So this actually helps you figure all that out. It's great. And one of the nice things about it is if you click through to any of these like red and green bars, it'll actually show you in the sources panel, like the original script with a line down the side of like what is read, what was executed, what wasn't executed. Nice. Really nice. Another thing that was popular this year, CSS Grid. So popular, people so happy for this. Yeah, it's got decent cross browser support now. Lots of good material by Rachel Andrew and Wes Boss. The Firefox DevTools did a great job of introducing CSS Grid highlighting. It's so pretty. And Wes Boss has done a tweet, we'll put it in the description where he explains what all the lines in this mean, which is, and it just, it looks stunning, like trying to figure out, especially if you're new learning what everything's doing. And we've also got support for this in the Chrome DevTools. Of course. Of course we do. Puppeteer. So this year we also introduced Puppeteer. It's a node library which provides a high level API to control Chrome headless over the DevTools remote debugging protocol. Really nice for sort of scripting a bunch of things. So if you want to script loading up a web page, you know, taking a screenshot of it, converting it to a PDF logging in, you can do that. I mean, if you wanted to do those, like you can compare two images and figure out what amount of it changed, this would be perfect for that. Two screenshots, same browser, bonk, what's changed? Nice for testing, nice for scraping content from sites. Next up we've got continuous integration, your favorite topic. Yes, I'm so excited about this. So Travis came out with this, this beta feature called Travis Build Stages. So you used to be able to have it where Travis could define multiple builds and it would just do the one after the other. Stages means you could say, well, actually I want these number of tests to run and then I want, after that I want to do a deploy script where I want GitHub comment bot or X number of stages. So this is really nice because you can start reorganizing your Travis file into chunks. It's still in beta, they're on the second iteration of this, but I am super excited. So good. Was it hard to set up? No, it was actually pretty easy. The thing was just the format and gets a little bit wonky depending on how advanced you want to get in terms of nesting stages. Nice. Another thing that we've seen quite a few different tools spread out for is performance budgets and performance budget tracking. Yes, like bundle sizes obviously like super popular. We've been using it in Wordbox like a similar incantation of it. And it's immensely helpful for just saying, oh, this PR has grown the size of this by X amount or this PR is purely to reduce the file size of something. And then you can actually see it in the PR. Really great for holding your team accountable. Yes. Next up, we've got design. I thought it was important for us to also talk about like the bridge improving between designers and developers. I use Sketch quite a lot whenever I'm sort of building prototypes trying to sketch out UIs. And something I came across was a plugin for Sketch and Image Optim. So Image Optim is this free desktop app for Mac that can optimize your images, has support for Mods, JPEG, modern compression schemes. What this hook does is whenever you're exporting images from Sketch to share with other people or deploy, it'll actually automatically run it through Image Optim. So you've got like the reduced number of bytes right off the bat. So you technically can't really export an image without it basically being as small as it can be right off the bat. Right now, I don't believe that's the case in Sketch. They should fix it. They should, but either way, if it simplifies it, awesome. Yeah. Another thing I really wanted to give a nod to was some work by the Airbnb team, John Gold, on React Sketch. So this is a really interesting project where it's tailor made for design systems. The idea is that you're able to sort of take your React components, your React style guides and convert it into a Sketch file with like layers and everything where your designers can then go and take a look at it. And it's interesting, right? Because this is the first time that this has been done sort of code to Sketch rather than... Yeah, you always see the other way where you see like a design of something and then it gets converted to HTML or something else. So it's nice to see it go the other way around. Yeah, super clever. Yeah, and React in this case provides a nice wrapper for building those reusable components. Next up, we've got scaffolding. One of our favorite things this year was NPMX. This was really interesting. So someone was talking about this, a waffle JS meetup. And the idea behind this is there's tons of examples you go NPM install yo and generator web app and then the following step would be yo web app. The idea with NPMX is you pass in the command that you want to do and it figures out, well, okay, you've tried to run yo but I need to go grab the yo package and you tried to run web app and I know I need the generator web app package. So it'll do the NPM install script for you and then immediately run the bit afterwards. And in the blog post for NPMX and I haven't tried this but apparently you can go NPMX and then like a gist URL and it would just run the commands in there. I mean, granted you have to trust the gist but that's kind of a nice way of being like, hey, if you want to set this thing up here you go, here's the command to do it. Yeah, so if you're ever in a situation where you want to run a CLI tool but you don't want to install it globally just to run it once NPMX is for you. Yes. Another thing we've seen this year, lots of CLI so create react app, react CLI, view CLI all of them have gained first class support for sort of scaffolding out a progressive web app. Yeah, you create a new project and boom, you're good to go with a service worker and everything. Lots of cool stuff to see there. And finally we've got command line tips. You can't have a TTT summary of the year without at least the command line being mentioned once. So I don't use the command line quite as often because I'm now a manager and I just send emails instead of. You don't do code anymore, I know, it's fine. But you do and so command line foo is a site that you can check out. It's got like a stack rank list of all the command line tips. Really neat for remembering those things that you've probably tweeted at some point, I forgot. Yeah, it's super nice. Add them to your dot files. They're all handy. Cool, so that's it for our tips. Yeah, hopefully you can try some of them out over your holiday period. Otherwise, happy holidays. Someone's sending you a new tab key. Don't do it.