1
00:00:00,000 --> 00:00:02,550
I'm Nick Pettit. >>I'm Jason Seifer.

2
00:00:02,550 --> 00:00:06,680
And you're watching the Treehouse Show, your weekly dose of internets where we talk about all things web design,

3
00:00:06,680 --> 00:00:09,240
web development, and more.

4
00:00:09,240 --> 00:00:16,280
In this episode we'll be talking about animated GIFs for documentation, Chrome DevTools for mobile, Grunt, and more.

5
00:00:16,280 --> 00:00:18,290
Let's check it out.

6
00:00:19,410 --> 00:00:22,550
[Treehouse Show]

7
00:00:22,550 --> 00:00:28,690
First up we have a blog post by David Smith on creating animated GIFs for documentation.

8
00:00:28,690 --> 00:00:34,610
Now a picture is worth 1,000 words, so a moving picture is worth several some sort of multiples of that. >>Wow.

9
00:00:34,610 --> 00:00:36,760
Yeah, several thousand words I guess.

10
00:00:36,760 --> 00:00:42,200
In this blog post David shows you how exactly to create an animated GIF to convey those words instead of typing them out

11
00:00:42,200 --> 00:00:45,160
because typing—who wants to do all of that?

12
00:00:45,160 --> 00:00:49,680
It's an interesting post. He's been working on this project called Feed Wrangler.

13
00:00:49,680 --> 00:00:53,280
He wanted to communicate some new capabilities of the software.

14
00:00:53,280 --> 00:00:57,270
Instead of writing out a ton of words, he made this swanky little animated GIF

15
00:00:57,270 --> 00:01:01,520
to show you how this particular piece of functionality works.

16
00:01:01,520 --> 00:01:07,660
It's actually pretty easy to do if you're on a Mac. You just open up QuickTime Player, hit the record button.

17
00:01:07,660 --> 00:01:11,380
He kind of goes through how to record every single different thing.

18
00:01:11,380 --> 00:01:14,620
You can prepare your mouse pointer. Just a whole bunch of different stuff.

19
00:01:14,620 --> 00:01:20,720
Once you've got the recording there's another program that he uses called GIF Brewery to open the movie,

20
00:01:20,720 --> 00:01:25,320
and then you can adjust the start and end point, add captions, crop, etc.

21
00:01:25,320 --> 00:01:30,900
Anyway really great post and communicating via animated GIFs is the new thing to do.

22
00:01:30,900 --> 00:01:34,770
I mean it's pretty old, but it's also new. Go ahead and take my word for that one.

23
00:01:34,770 --> 00:01:40,520
This is Mac only, so if you're on Windows just go ahead and cry softly.

24
00:01:40,520 --> 00:01:44,180
No, actually I think there's probably a work-around for this.

25
00:01:44,180 --> 00:01:49,770
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.

26
00:01:49,770 --> 00:01:58,080
Next up we have a really cool post from the HTML5 Rocks blog, and it's called Chrome DevTools for Mobile,

27
00:01:58,080 --> 00:02:01,090
Screencast, and Emulation.

28
00:02:01,090 --> 00:02:03,550
What? >>I know.

29
00:02:03,550 --> 00:02:08,490
What is this? Well of course in Google Chrome you have the DevTools.

30
00:02:08,490 --> 00:02:13,850
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.

31
00:02:13,850 --> 00:02:17,960
There's all these developer tools right here built into Chrome.

32
00:02:17,960 --> 00:02:21,420
I can select elements and do all sorts of cool stuff.

33
00:02:21,420 --> 00:02:25,280
We actually cover that on Treehouse so be sure to check that out.

34
00:02:25,280 --> 00:02:33,250
But there has been an update to the DevTools where you can now debug mobile devices more easily.

35
00:02:33,250 --> 00:02:40,550
Before you used to have to refresh on your mobile device and look back at your screen of the DevTools,

36
00:02:40,550 --> 00:02:51,500
but now they've integrated it very tightly so you can actually see the mobile screen directly on your device next to the DevTools.

37
00:02:51,500 --> 00:03:00,120
That makes it much easier to debug, and as if that weren't enough you can actually click on your screen

38
00:03:00,120 --> 00:03:04,820
and those will be translated into taps on the mobile device.

39
00:03:04,820 --> 00:03:09,820
That makes it really easy to debug.

40
00:03:09,820 --> 00:03:15,010
Now there's a whole bunch of other features. Another cool one is mobile emulation.

41
00:03:15,010 --> 00:03:19,320
Let's say that you don't have a mobile device that you can test with.

42
00:03:19,320 --> 00:03:27,870
Well you can actually emulate a mobile device and many of its properties using the Device Metrics feature.

43
00:03:27,870 --> 00:03:31,760
You can go ahead and just simulate it right there in the browser.

44
00:03:31,760 --> 00:03:33,780
There's a whole bunch of other cool features.

45
00:03:33,780 --> 00:03:42,540
This only works with the latest version of Chrome for Android, but hopefully it will come to other mobile operating systems,

46
00:03:42,540 --> 00:03:45,910
namely iOS, at some point in the future.

47
00:03:45,910 --> 00:03:49,370
Yeah, that's really incredibly useful. Awesome, awesome post.

48
00:03:49,370 --> 00:03:56,450
Next up we have a blog post by Chris Coyier entitled Grunt For People Who Think Things Like Grunt are Weird and Hard.

49
00:03:56,450 --> 00:03:58,450
I'm one of those people.

50
00:03:58,450 --> 00:04:03,360
Now we talk about a lot of things here on the Treehouse Show: optimizing images, concatenating and minifiying

51
00:04:03,360 --> 00:04:11,730
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.

52
00:04:11,730 --> 00:04:17,600
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.

53
00:04:17,600 --> 00:04:25,460
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

54
00:04:25,460 --> 00:04:29,840
and then shows you how exactly to get Grunt up and running.

55
00:04:29,840 --> 00:04:35,020
He also goes through some misconceptions about Grunt like hey, I really don't need to do the things Grunt does.

56
00:04:35,020 --> 00:04:40,070
Well yeah, you do, and you probably do them manually right now, so why not save yourself the trouble

57
00:04:40,070 --> 00:04:44,300
and actually get Grunt up and running and work on it?

58
00:04:44,300 --> 00:04:52,010
It's actually pretty easy to use, and he walks you through every single part of it here including adding the dependencies,

59
00:04:52,010 --> 00:04:56,700
installing Node, and look, there's even a nice little animated GIF right here

60
00:04:56,700 --> 00:04:59,040
about getting certain parts of it set up in the terminal.

61
00:04:59,040 --> 00:05:03,970
If you've never used the terminal before, there's a nice little animated GIF right here,

62
00:05:03,970 --> 00:05:08,050
and he can even give you the commands to copy and paste into the terminal.

63
00:05:08,050 --> 00:05:13,140
Also just saying Treehouse has a really awesome course called Consul Foundations where we go through the terminal.

64
00:05:13,140 --> 00:05:17,880
Again walking through everything you need to do to install all these different things in your project.

65
00:05:17,880 --> 00:05:21,990
Check it out. We'll have a link to it in the show notes that you can find at youtube.com/gotreehouse,

66
00:05:21,990 --> 00:05:25,080
or search for us in iTunes at the Treehouse Show.

67
00:05:25,080 --> 00:05:32,010
That is wonderful. Well next up is bulletproof email buttons. Now what does that mean?

68
00:05:32,010 --> 00:05:34,150
It means that they can't be harmed by bullets.

69
00:05:34,150 --> 00:05:43,880
It actually means that it creates rock-solid buttons that you can embed into email messages.

70
00:05:43,880 --> 00:05:48,010
I was close. >>Yeah. Just slightly off.

71
00:05:48,010 --> 00:05:51,110
Like if it was on Jeopardy I would get the point.

72
00:05:51,110 --> 00:05:53,580
Maybe. Probably not.

73
00:05:53,580 --> 00:05:59,120
But anyway it's notoriously difficult to put buttons into emails.

74
00:05:59,120 --> 00:06:03,660
It's actually notoriously difficult to put anything into emails.

75
00:06:03,660 --> 00:06:10,850
Once again we have a great course about that on Treehouse, but let's go ahead and check out this button here.

76
00:06:10,850 --> 00:06:19,300
It generates all of this crazy-looking code using a language called VML. Wow, that sounds scary. >>[Jason Seifer] It does.

77
00:06:19,300 --> 00:06:22,990
[Nick Pettit] But good thing it generates all of it for us.

78
00:06:22,990 --> 00:06:26,480
We can go ahead and set a background color and a font color, and look at that.

79
00:06:26,480 --> 00:06:32,310
We can even include a background image if we want to. Isn't that wonderful?

80
00:06:32,310 --> 00:06:37,240
We can set all sorts of other properties and say where the button should go,

81
00:06:37,240 --> 00:06:44,620
and then we can go ahead and just copy and paste all the code that it generates for us.

82
00:06:44,620 --> 00:06:47,520
We'll have this lovely button here.

83
00:06:47,520 --> 00:06:56,130
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

84
00:06:56,130 --> 00:07:01,050
and why this tool is so great because it does all that for you.

85
00:07:01,050 --> 00:07:03,200
That's really awesome.

86
00:07:03,200 --> 00:07:08,590
Been bulletproofed. Next up we have a project called Headroom.js.

87
00:07:08,590 --> 00:07:13,750
This is a really cool piece of JavaScript that hides your header on your site when you don't need it.

88
00:07:13,750 --> 00:07:18,790
Extremely simple to use like basically all the JavaScript projects we feature on here, so let's take a look at how it works.

89
00:07:18,790 --> 00:07:21,300
Here's the header that you see on the page right now.

90
00:07:21,300 --> 00:07:24,370
"Give your pages some headroom. Hide your header until you need it."

91
00:07:24,370 --> 00:07:29,310
You'll notice as I'm scrolling down the site here—wow, header disappears. What? What's going on?

92
00:07:29,310 --> 00:07:33,130
Then look at that. Whoa. It's gone. Wait, but I want to see it again.

93
00:07:33,130 --> 00:07:39,780
I'll just scroll back up, and look. Look, it's back. Whoa. What happened?

94
00:07:39,780 --> 00:07:42,530
Pretty easy to use.

95
00:07:42,530 --> 00:07:51,200
You just add a couple of different CSS classes to your HTML, and then it works either in pure JavaScript

96
00:07:51,200 --> 00:07:53,840
or as a jQuery and Zepto plugin.

97
00:07:53,840 --> 00:07:56,510
There's a couple different examples that they have on their site.

98
00:07:56,510 --> 00:08:02,270
You can adjust the offset, the tolerance, and even a couple of different styles of header hiding.

99
00:08:02,270 --> 00:08:08,390
Look at that. That's the swing. Check out the flip. What? Or a bounce. Wow, this is crazy.

100
00:08:08,390 --> 00:08:12,350
Why is my header bouncing around the screen? Because we made it do that. That's why.

101
00:08:12,350 --> 00:08:19,670
Anyway this can add just a nice little piece of flair to your site, so check it out. Headroom.js.

102
00:08:19,670 --> 00:08:27,130
Very cool stuff. Next up is a Mac app—sorry again Windows users—but this is a Mac app called Duo.

103
00:08:27,130 --> 00:08:36,120
It allows you to see a mobile version and a desktop version of a site as your developing it,

104
00:08:36,120 --> 00:08:42,169
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.

105
00:08:42,169 --> 00:08:44,690
Make a day of it. >>For fun. >>Why not?

106
00:08:44,690 --> 00:08:53,170
If you're doing web development and you're creating responsive websites which you should be

107
00:08:53,170 --> 00:08:56,710
and you're constantly resizing the browser and refreshing—

108
00:08:56,710 --> 00:08:59,840
Or using some of the tools we talked about on previous episodes.

109
00:08:59,840 --> 00:09:07,780
Right. This makes it much, much easier. You can actually just see the mobile view and desktop view at the same time.

110
00:09:07,780 --> 00:09:12,880
Let's take a look at this. This is kind of a mock-up of what it looks like.

111
00:09:12,880 --> 00:09:15,200
I'm going to click on features here, and whoa, look at that.

112
00:09:15,200 --> 00:09:17,990
We have labels for every part of it.

113
00:09:17,990 --> 00:09:27,450
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.

114
00:09:27,450 --> 00:09:35,660
It has synchronized browsing—look at that—so you don't need to reload both layouts. You can just reload one layout.

115
00:09:35,660 --> 00:09:42,540
It includes all of the web kit, DevTools, and a couple of other nice little features there.

116
00:09:42,540 --> 00:09:51,490
It is a paid app, and again it is Mac only, but it's pretty cool. We thought it was worth mentioning.

117
00:09:51,490 --> 00:09:58,340
Yeah, that is pretty cool. You mean the duo of us thought it was worth mentioning.

118
00:09:58,340 --> 00:10:00,340
Nailed it. >>I see what you did there.

119
00:10:00,340 --> 00:10:07,430
Next up we have an article on HTML5 Rocks by Jake Archibald called JavaScript Promises.

120
00:10:07,430 --> 00:10:11,340
Everybody can rejoice. Promises have finally arrived in JavaScript.

121
00:10:11,340 --> 00:10:15,400
Now when we talk about JavaScript Promises, we don't mean saying that somebody's going to go out for milk,

122
00:10:15,400 --> 00:10:17,930
and then they don't come back for the rest of your life.

123
00:10:17,930 --> 00:10:22,810
We're talking about being able to simply write multi-threaded code in JavaScript.

124
00:10:22,810 --> 00:10:27,100
More like a Christmas miracle. >>Yes, more like a Christmas miracle. >>Got it.

125
00:10:27,100 --> 00:10:33,880
For starters, JavaScript is sort of synchronous at best, and we kind of have these hacks where we add event listeners to things

126
00:10:33,880 --> 00:10:39,050
and wait until the event has fired, and then we can work on code around that.

127
00:10:39,050 --> 00:10:46,850
Now with JavaScript Promises we get these cool little statements called Then where we can pass a function into it

128
00:10:46,850 --> 00:10:51,590
and work around after the event is called.

129
00:10:51,590 --> 00:10:58,980
Here is an example of changing one particular callback if something fails.

130
00:10:58,980 --> 00:11:04,780
We have image one. Call this if it's loaded. Whatever. Call this function, or if it's failed call this function.

131
00:11:04,780 --> 00:11:07,050
Then do all this.

132
00:11:07,050 --> 00:11:16,200
Or with Promises you can use the Then keyword or use a Promise object and then use the all

133
00:11:16,200 --> 00:11:18,880
and Then, and then do a whole bunch of things if it fails.

134
00:11:18,880 --> 00:11:23,390
Now this is a huge article that goes way in depth of how JavaScript Promises work.

135
00:11:23,390 --> 00:11:28,110
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

136
00:11:28,110 --> 00:11:34,690
or even some of the nightly Firefox builds; however, there are some JavaScript libraries that allow you to add Promises

137
00:11:34,690 --> 00:11:37,730
kind of in a polyfill sort of way to existing code.

138
00:11:37,730 --> 00:11:43,210
I really recommended reading this article because this is going to be where JavaScript is going on the web

139
00:11:43,210 --> 00:11:46,180
and how things are actually going to be written in the future.

140
00:11:46,180 --> 00:11:52,030
Web browsers are getting more and more powerful, and it's going to be important to be able to write multi-threaded code

141
00:11:52,030 --> 00:11:56,690
in your applications, so I really, really recommend checking that out in the show notes.

142
00:11:56,690 --> 00:11:59,470
We promise it will be worth your time. >>Oh.

143
00:11:59,470 --> 00:12:08,030
Next up is Adaptive Backgrounds which is a jQuery plugin for extracting the dominant color of an image,

144
00:12:08,030 --> 00:12:13,350
and then you can go ahead and apply it to its parent element. What does that look like?

145
00:12:13,350 --> 00:12:18,440
When you say the dominant color, do you mean it immediately knocks somebody out to set the tone?

146
00:12:18,440 --> 00:12:27,080
No, it just selects the color that is most present in the image. >>My bad.

147
00:12:27,080 --> 00:12:33,520
It's a common mistake. Here we have this picture, and it looks like it's mostly greenish.

148
00:12:33,520 --> 00:12:38,330
It has a lot of other colors in there, but it's basically green.

149
00:12:38,330 --> 00:12:45,440
It's detected that and selected that color, and it's applied it to the parent, to its background.

150
00:12:45,440 --> 00:12:52,090
If we scroll down further, whoa, look at that. We've got a mostly yellow image or mostly red image.

151
00:12:52,090 --> 00:12:59,040
It basically averages the image or finds the dominant color, and it sets it to the background.

152
00:12:59,040 --> 00:13:04,140
Not a whole lot to say about it, but it is open source on GitHub.

153
00:13:04,140 --> 00:13:08,860
I mean it's open source as every jQuery or JavaScript might be.

154
00:13:08,860 --> 00:13:12,680
You can go ahead and look at the source and see how it works. It's actually pretty fascinating.

155
00:13:12,680 --> 00:13:14,680
It's using another piece of technology in there.

156
00:13:14,680 --> 00:13:21,860
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.

157
00:13:21,860 --> 00:13:24,700
Really tie the site together. >>Exactly.

158
00:13:24,700 --> 00:13:30,180
It's pretty cool. Anyway Happy Holidays. I'm @nickrp on Twitter.

159
00:13:30,180 --> 00:13:36,550
I'm @jseifer. For more information on anything we talked about, check out the show notes on youtube.com/go treehouse,

160
00:13:36,550 --> 00:13:41,320
and search for us and rate us on iTunes by going to the Treehouse Show.

161
00:13:41,320 --> 00:13:48,650
Of course if you'd like to see more videos like this one about web design, web development, mobile, business, and so much more,

162
00:13:48,650 --> 00:13:52,290
be sure to check us out at treamtreehouse.com.

163
00:13:52,290 --> 00:13:55,380
Thanks so much for watching, and we'll see you next week.

164
00:13:55,380 --> 00:14:00,700
[Treehouse Show]