Episode 71: Animated GIFs for Documentation, Chrome DevTools for Mobile, Grunt

I'm Nick Pettit. >>I'm Jason Seifer. 0:00 And you're watching the Treehouse Show, your weekly dose of internets where we talk about all things web design, 0:02 web development, and more. 0:06 In this episode we'll be talking about animated GIFs for documentation, Chrome DevTools for mobile, Grunt, and more. 0:09 Let's check it out. 0:16 [Treehouse Show] 0:19 First up we have a blog post by David Smith on creating animated GIFs for documentation. 0:22 Now a picture is worth 1,000 words, so a moving picture is worth several some sort of multiples of that. >>Wow. 0:28 Yeah, several thousand words I guess. 0:34 In this blog post David shows you how exactly to create an animated GIF to convey those words instead of typing them out 0:36 because typing—who wants to do all of that? 0:42 It's an interesting post. He's been working on this project called Feed Wrangler. 0:45 He wanted to communicate some new capabilities of the software. 0:49 Instead of writing out a ton of words, he made this swanky little animated GIF 0:53 to show you how this particular piece of functionality works. 0:57 It's actually pretty easy to do if you're on a Mac. You just open up QuickTime Player, hit the record button. 1:01 He kind of goes through how to record every single different thing. 1:07 You can prepare your mouse pointer. Just a whole bunch of different stuff. 1:11 Once you've got the recording there's another program that he uses called GIF Brewery to open the movie, 1:14 and then you can adjust the start and end point, add captions, crop, etc. 1:20 Anyway really great post and communicating via animated GIFs is the new thing to do. 1:25 I mean it's pretty old, but it's also new. Go ahead and take my word for that one. 1:30 This is Mac only, so if you're on Windows just go ahead and cry softly. 1:34 No, actually I think there's probably a work-around for this. 1:40 We're not going to cover it in the show, but if you know a work-around be sure to post it in the comments. 1:44 Next up we have a really cool post from the HTML5 Rocks blog, and it's called Chrome DevTools for Mobile, 1:49 Screencast, and Emulation. 1:58 What? >>I know. 2:01 What is this? Well of course in Google Chrome you have the DevTools. 2:03 If you're not familiar with that, I'll go ahead and open them up here, and you can see what they look like. Whoa, look at that. 2:08 There's all these developer tools right here built into Chrome. 2:13 I can select elements and do all sorts of cool stuff. 2:17 We actually cover that on Treehouse so be sure to check that out. 2:21 But there has been an update to the DevTools where you can now debug mobile devices more easily. 2:25 Before you used to have to refresh on your mobile device and look back at your screen of the DevTools, 2:33 but now they've integrated it very tightly so you can actually see the mobile screen directly on your device next to the DevTools. 2:40 That makes it much easier to debug, and as if that weren't enough you can actually click on your screen 2:51 and those will be translated into taps on the mobile device. 3:00 That makes it really easy to debug. 3:04 Now there's a whole bunch of other features. Another cool one is mobile emulation. 3:09 Let's say that you don't have a mobile device that you can test with. 3:15 Well you can actually emulate a mobile device and many of its properties using the Device Metrics feature. 3:19 You can go ahead and just simulate it right there in the browser. 3:27 There's a whole bunch of other cool features. 3:31 This only works with the latest version of Chrome for Android, but hopefully it will come to other mobile operating systems, 3:33 namely iOS, at some point in the future. 3:42 Yeah, that's really incredibly useful. Awesome, awesome post. 3:45 Next up we have a blog post by Chris Coyier entitled Grunt For People Who Think Things Like Grunt are Weird and Hard. 3:49 I'm one of those people. 3:56 Now we talk about a lot of things here on the Treehouse Show: optimizing images, concatenating and minifiying 3:58 your CSS and JavaScript, and a tool like Grunt can do all of that for you without really too much to be done on your part. 4:03 However, it can be a little bit intimidating to set up if you're not familiar with Node.js or the command line or things like that. 4:11 In this really, really well done blog post on 24 Ways, Chris Coyier first sells you on Grunt for things that you might want to do 4:17 and then shows you how exactly to get Grunt up and running. 4:25 He also goes through some misconceptions about Grunt like hey, I really don't need to do the things Grunt does. 4:29 Well yeah, you do, and you probably do them manually right now, so why not save yourself the trouble 4:35 and actually get Grunt up and running and work on it? 4:40 It's actually pretty easy to use, and he walks you through every single part of it here including adding the dependencies, 4:44 installing Node, and look, there's even a nice little animated GIF right here 4:52 about getting certain parts of it set up in the terminal. 4:56 If you've never used the terminal before, there's a nice little animated GIF right here, 4:59 and he can even give you the commands to copy and paste into the terminal. 5:03 Also just saying Treehouse has a really awesome course called Consul Foundations where we go through the terminal. 5:08 Again walking through everything you need to do to install all these different things in your project. 5:13 Check it out. We'll have a link to it in the show notes that you can find at youtube.com/gotreehouse, 5:17 or search for us in iTunes at the Treehouse Show. 5:21 That is wonderful. Well next up is bulletproof email buttons. Now what does that mean? 5:25 It means that they can't be harmed by bullets. 5:32 It actually means that it creates rock-solid buttons that you can embed into email messages. 5:34 I was close. >>Yeah. Just slightly off. 5:43 Like if it was on Jeopardy I would get the point. 5:48 Maybe. Probably not. 5:51 But anyway it's notoriously difficult to put buttons into emails. 5:53 It's actually notoriously difficult to put anything into emails. 5:59 Once again we have a great course about that on Treehouse, but let's go ahead and check out this button here. 6:03 It generates all of this crazy-looking code using a language called VML. Wow, that sounds scary. >>[Jason Seifer] It does. 6:10 [Nick Pettit] But good thing it generates all of it for us. 6:19 We can go ahead and set a background color and a font color, and look at that. 6:22 We can even include a background image if we want to. Isn't that wonderful? 6:26 We can set all sorts of other properties and say where the button should go, 6:32 and then we can go ahead and just copy and paste all the code that it generates for us. 6:37 We'll have this lovely button here. 6:44 Now if that looks like a lot of code just for a single button, you are correct, but that's why HTML emails are so difficult to create 6:47 and why this tool is so great because it does all that for you. 6:56 That's really awesome. 7:01 Been bulletproofed. Next up we have a project called Headroom.js. 7:03 This is a really cool piece of JavaScript that hides your header on your site when you don't need it. 7:08 Extremely simple to use like basically all the JavaScript projects we feature on here, so let's take a look at how it works. 7:13 Here's the header that you see on the page right now. 7:18 "Give your pages some headroom. Hide your header until you need it." 7:21 You'll notice as I'm scrolling down the site here—wow, header disappears. What? What's going on? 7:24 Then look at that. Whoa. It's gone. Wait, but I want to see it again. 7:29 I'll just scroll back up, and look. Look, it's back. Whoa. What happened? 7:33 Pretty easy to use. 7:39 You just add a couple of different CSS classes to your HTML, and then it works either in pure JavaScript 7:42 or as a jQuery and Zepto plugin. 7:51 There's a couple different examples that they have on their site. 7:53 You can adjust the offset, the tolerance, and even a couple of different styles of header hiding. 7:56 Look at that. That's the swing. Check out the flip. What? Or a bounce. Wow, this is crazy. 8:02 Why is my header bouncing around the screen? Because we made it do that. That's why. 8:08 Anyway this can add just a nice little piece of flair to your site, so check it out. Headroom.js. 8:12 Very cool stuff. Next up is a Mac app—sorry again Windows users—but this is a Mac app called Duo. 8:19 It allows you to see a mobile version and a desktop version of a site as your developing it, 8:27 or you can just go ahead and browse the web with it I guess and look at the mobile and desktop versions of your favorite websites. 8:36 Make a day of it. >>For fun. >>Why not? 8:42 If you're doing web development and you're creating responsive websites which you should be 8:44 and you're constantly resizing the browser and refreshing— 8:53 Or using some of the tools we talked about on previous episodes. 8:56 Right. This makes it much, much easier. You can actually just see the mobile view and desktop view at the same time. 8:59 Let's take a look at this. This is kind of a mock-up of what it looks like. 9:07 I'm going to click on features here, and whoa, look at that. 9:12 We have labels for every part of it. 9:15 Over here on the left side is a fixed mobile view, and then on the right side we have the tablet or desktop view which is much wider. 9:17 It has synchronized browsing—look at that—so you don't need to reload both layouts. You can just reload one layout. 9:27 It includes all of the web kit, DevTools, and a couple of other nice little features there. 9:35 It is a paid app, and again it is Mac only, but it's pretty cool. We thought it was worth mentioning. 9:42 Yeah, that is pretty cool. You mean the duo of us thought it was worth mentioning. 9:51 Nailed it. >>I see what you did there. 9:58 Next up we have an article on HTML5 Rocks by Jake Archibald called JavaScript Promises. 10:00 Everybody can rejoice. Promises have finally arrived in JavaScript. 10:07 Now when we talk about JavaScript Promises, we don't mean saying that somebody's going to go out for milk, 10:11 and then they don't come back for the rest of your life. 10:15 We're talking about being able to simply write multi-threaded code in JavaScript. 10:17 More like a Christmas miracle. >>Yes, more like a Christmas miracle. >>Got it. 10:22 For starters, JavaScript is sort of synchronous at best, and we kind of have these hacks where we add event listeners to things 10:27 and wait until the event has fired, and then we can work on code around that. 10:33 Now with JavaScript Promises we get these cool little statements called Then where we can pass a function into it 10:39 and work around after the event is called. 10:46 Here is an example of changing one particular callback if something fails. 10:51 We have image one. Call this if it's loaded. Whatever. Call this function, or if it's failed call this function. 10:58 Then do all this. 11:04 Or with Promises you can use the Then keyword or use a Promise object and then use the all 11:07 and Then, and then do a whole bunch of things if it fails. 11:16 Now this is a huge article that goes way in depth of how JavaScript Promises work. 11:18 Now you're not going to be able to use them right now unless you're using some of the latest web browsers like Canary 11:23 or even some of the nightly Firefox builds; however, there are some JavaScript libraries that allow you to add Promises 11:28 kind of in a polyfill sort of way to existing code. 11:34 I really recommended reading this article because this is going to be where JavaScript is going on the web 11:37 and how things are actually going to be written in the future. 11:43 Web browsers are getting more and more powerful, and it's going to be important to be able to write multi-threaded code 11:46 in your applications, so I really, really recommend checking that out in the show notes. 11:52 We promise it will be worth your time. >>Oh. 11:56 Next up is Adaptive Backgrounds which is a jQuery plugin for extracting the dominant color of an image, 11:59 and then you can go ahead and apply it to its parent element. What does that look like? 12:08 When you say the dominant color, do you mean it immediately knocks somebody out to set the tone? 12:13 No, it just selects the color that is most present in the image. >>My bad. 12:18 It's a common mistake. Here we have this picture, and it looks like it's mostly greenish. 12:27 It has a lot of other colors in there, but it's basically green. 12:33 It's detected that and selected that color, and it's applied it to the parent, to its background. 12:38 If we scroll down further, whoa, look at that. We've got a mostly yellow image or mostly red image. 12:45 It basically averages the image or finds the dominant color, and it sets it to the background. 12:52 Not a whole lot to say about it, but it is open source on GitHub. 12:59 I mean it's open source as every jQuery or JavaScript might be. 13:04 You can go ahead and look at the source and see how it works. It's actually pretty fascinating. 13:08 It's using another piece of technology in there. 13:12 I like it. >>Yeah, not a whole lot to say about it, but it could be useful if you want to create an image gallery. 13:14 Really tie the site together. >>Exactly. 13:21 It's pretty cool. Anyway Happy Holidays. I'm @nickrp on Twitter. 13:24 I'm @jseifer. For more information on anything we talked about, check out the show notes on youtube.com/go treehouse, 13:30 and search for us and rate us on iTunes by going to the Treehouse Show. 13:36 Of course if you'd like to see more videos like this one about web design, web development, mobile, business, and so much more, 13:41 be sure to check us out at treamtreehouse.com. 13:48 Thanks so much for watching, and we'll see you next week. 13:52 [Treehouse Show] 13:55

You need to sign up for Treehouse in order to set up Workspace

Sign up