1
00:00:00,000 --> 00:00:02,220
[The Treehouse Show]

2
00:00:02,220 --> 00:00:04,300
Hi, I'm Nick Pettit. >>I'm Jason Seifer.

3
00:00:04,300 --> 00:00:07,290
[Pettit] And you're watching The Treehouse Show, your weekly dose of Internet,

4
00:00:07,290 --> 00:00:11,770
where we talk about all things web design, web development, and more.

5
00:00:11,770 --> 00:00:15,540
[Seifer] In this episode, we'll be talking about responsive image techniques,

6
00:00:15,540 --> 00:00:19,500
controlling and customizing your development environment, and more.

7
00:00:19,500 --> 00:00:21,500
[Pettit] Let's check it out!

8
00:00:21,500 --> 00:00:27,050
[The Treehouse Show]

9
00:00:27,050 --> 00:00:33,330
First up is adaptive images, available at adaptive-images.com.

10
00:00:33,330 --> 00:00:37,160
On the show, I feel like we've talked about responsive web design

11
00:00:37,160 --> 00:00:40,920
every single episode, but it's because it's important.

12
00:00:40,920 --> 00:00:43,390
And adaptive images makes it even easier.

13
00:00:43,390 --> 00:00:46,420
Basically, when a visitor comes to your website,

14
00:00:46,420 --> 00:00:51,690
it will detect the screen size, automatically create a rescaled image,

15
00:00:51,690 --> 00:00:55,260
and then cache it so that when the next visitor comes by,

16
00:00:55,260 --> 00:00:59,240
that image will be ready to go.

17
00:00:59,240 --> 00:01:04,030
It uses a PHP script and hooks into Apache,

18
00:01:04,030 --> 00:01:07,440
and it's actually pretty clever in its implementation.

19
00:01:07,440 --> 00:01:11,160
But the bottom line is, it will create smaller images

20
00:01:11,160 --> 00:01:17,810
that are more appropriately scaled in terms of their file size to smaller mobile devices.

21
00:01:17,810 --> 00:01:22,140
[Seifer] So this is going to save time, say, if you're on an iPhone or a mobile device.

22
00:01:22,140 --> 00:01:25,490
You're going to get a smaller image and thus the page is going to load quicker,

23
00:01:25,490 --> 00:01:29,360
which is good for everybody, I think, in that scenario, right?

24
00:01:29,360 --> 00:01:33,080
[Pettit] Exactly. And as it says on the site,

25
00:01:33,080 --> 00:01:37,460
your site is being viewed by increasingly smaller, slower,

26
00:01:37,460 --> 00:01:40,540
and low bandwidth devices.

27
00:01:40,540 --> 00:01:43,630
[Seifer] That's good news. >>Yeah. That's great.

28
00:01:43,630 --> 00:01:45,610
[Seifer] Awesome. >>All right.

29
00:01:45,610 --> 00:01:48,440
[Seifer] So along those lines, and completely not along those lines,

30
00:01:48,440 --> 00:01:52,750
next up is Snappy Dashboards with Redis.

31
00:01:52,750 --> 00:01:56,180
Now, Nick, you've probably seen applications where you log into the app

32
00:01:56,180 --> 00:01:58,760
and it has a dashboard overview of what's going on,

33
00:01:58,760 --> 00:02:04,360
maybe how many clicks were someplace, or a bar graph of what's going on. >>Exactly.

34
00:02:04,360 --> 00:02:07,210
[Seifer] Well, it can occasionally be very cumbersome

35
00:02:07,210 --> 00:02:10,860
to get at that data if you're using a relational database.

36
00:02:10,860 --> 00:02:15,360
This could take a lot of different queries to see the proper information,

37
00:02:15,360 --> 00:02:18,230
and it can wind up becoming a little bit expensive.

38
00:02:18,230 --> 00:02:22,270
[Pettit] Because you have to pull together all these various pieces of information.

39
00:02:22,270 --> 00:02:23,760
[Seifer] Yeah. You have to assemble a whole bunch.

40
00:02:23,760 --> 00:02:29,010
So there's an interesting blog post called "Snappy Dashboards with Redis."

41
00:02:29,010 --> 00:02:32,670
Now, this talks about using Redis, which is one of these

42
00:02:32,670 --> 00:02:37,380
newfangled, NoSQL databases. >>Whoa. >>I know.

43
00:02:37,380 --> 00:02:40,900
A lot of words there. A lot of words.

44
00:02:40,900 --> 00:02:45,960
But what Redis does is, essentially, it's like a glorified key value store that's persistent.

45
00:02:45,960 --> 00:02:50,130
So the technique that they use in this post is concatenating

46
00:02:50,130 --> 00:02:53,150
all your different statistics with certain Redis keys

47
00:02:53,150 --> 00:02:57,270
that are going to be a lot quicker to increment and decrement.

48
00:02:57,270 --> 00:02:59,310
This way, when you want to create a dashboard,

49
00:02:59,310 --> 00:03:02,250
you only have to do a limited amount of querying

50
00:03:02,250 --> 00:03:05,690
from Redis rather than your database.

51
00:03:05,690 --> 00:03:09,010
This is going to result in a lot quicker page use for your users.

52
00:03:09,010 --> 00:03:13,780
The blog post has more specific techniques on how they wound up doing this,

53
00:03:13,780 --> 00:03:17,060
and the different keys that they wound up using,

54
00:03:17,060 --> 00:03:20,890
and even some sample Ruby code in order to do this.

55
00:03:20,890 --> 00:03:23,170
This is definitely something that you're going to want to

56
00:03:23,170 --> 00:03:25,860
read the show notes for for more information,

57
00:03:25,860 --> 00:03:28,500
and you can find the show notes on our YouTube channel

58
00:03:28,500 --> 00:03:31,840
at youtube.com/gotreehouse.

59
00:03:31,840 --> 00:03:34,670
[Pettit] All right. Go treehouse. So next up,

60
00:03:34,670 --> 00:03:39,070
we're going to talk about how to create a responsive SVG.

61
00:03:39,070 --> 00:03:42,920
[Seifer] Now, is it true that people are pronounicing SVG as "savage?"

62
00:03:42,920 --> 00:03:45,180
[Pettit] No. I think that's actually just you, Jason.

63
00:03:45,180 --> 00:03:47,430
[Seifer] Thought I read that somewhere. >>Nope.

64
00:03:47,430 --> 00:03:51,140
You just made that up. All right.

65
00:03:51,140 --> 00:03:53,470
Actually, we're not going to tell you how to do it, we're going to direct you

66
00:03:53,470 --> 00:03:57,980
to this really great blog post that tells you exactly how to do it.

67
00:03:57,980 --> 00:04:00,430
And actually, it's very simple.

68
00:04:00,430 --> 00:04:03,860
It's very simple to creating a fluid image.

69
00:04:03,860 --> 00:04:09,150
Basically, you would create your vector image in Illustrator,

70
00:04:09,150 --> 00:04:12,730
and you want to go ahead and export it as an SVG.

71
00:04:12,730 --> 00:04:16,790
I am kind of glossing over this a little bit,

72
00:04:16,790 --> 00:04:21,529
but ultimately, you'll end up with some HTML that is your SVG,

73
00:04:21,529 --> 00:04:26,550
and you can put that into your HTML document, I should say.

74
00:04:26,550 --> 00:04:33,890
Then, in your CSS, you can go ahead and set the width to 100%.

75
00:04:33,890 --> 00:04:38,530
That's very similar to what you would do for images in a responsive website.

76
00:04:38,530 --> 00:04:41,380
What this is going to do is it's going to cause the SVG

77
00:04:41,380 --> 00:04:44,960
to take up the full width of its parent element,

78
00:04:44,960 --> 00:04:51,870
and that way, if you're resizing the browser in a fluid layout,

79
00:04:51,870 --> 00:04:58,170
it will go ahead and just continue to expand or contract proportionally.

80
00:04:58,170 --> 00:05:02,880
Pretty nifty, and again, it's very similar to fluid images,

81
00:05:02,880 --> 00:05:08,160
but it's something that, I don't know, I wouldn't have known that had I not read it.

82
00:05:08,160 --> 00:05:11,050
[Seifer] I'm pretty sure it's pronounced "savages."

83
00:05:11,050 --> 00:05:14,140
[Pettit] I think you're right, Jason. I'll let you go on thinking that.

84
00:05:14,140 --> 00:05:18,230
[Seifer] Thanks. Next up is our app review.

85
00:05:18,230 --> 00:05:22,330
[Pettit] Let's check it out.

86
00:05:22,330 --> 00:05:26,220
[App Review]

87
00:05:26,220 --> 00:05:29,540
[Seifer] Our app review this week is an app called Shortcat.

88
00:05:29,540 --> 00:05:34,530
[Pettit] And that has nothing to do with Longcat. >>Except it's the opposite. >>Got it.

89
00:05:34,530 --> 00:05:38,310
[Seifer] Shortcat is a very interesting application for OS X.

90
00:05:38,310 --> 00:05:46,540
And this is going to give you the ability to interface with GUI elements using the keyboard.

91
00:05:46,540 --> 00:05:48,970
Now, I know that's a little bit strange to say,

92
00:05:48,970 --> 00:05:52,340
but you get a command prompt, and--yeah, here we go.

93
00:05:52,340 --> 00:05:57,300
Cut to it. You'll notice this little video they have on the site in system preferences.

94
00:05:57,300 --> 00:05:59,670
[Pettit] I only notice the really cute cat.

95
00:05:59,670 --> 00:06:01,610
[Seifer]. Yeah, look at that. Look at that cat.

96
00:06:01,610 --> 00:06:04,280
It's got a little computer mouse hanging from its mouth.

97
00:06:04,280 --> 00:06:08,420
[Pettit] That's crazy. >>I know.

98
00:06:08,420 --> 00:06:10,510
So the example that they give is in system preferences,

99
00:06:10,510 --> 00:06:13,060
and if you wanted to go to the network preference,

100
00:06:13,060 --> 00:06:20,230
you do the Shortcat shortcut, and press the letter 'n' for network.

101
00:06:20,230 --> 00:06:26,300
Then you can completely navigate around the OS X GUI using Shortcat.

102
00:06:26,300 --> 00:06:31,360
What I found that's really interesting is it works with Chrome as well.

103
00:06:31,360 --> 00:06:33,680
So let me see if I can get my navigation bar up here

104
00:06:33,680 --> 00:06:37,650
So I launch Shortcat with command + shift + space.

105
00:06:37,650 --> 00:06:40,890
You see the little cat eyes come up on the bottom of the screen,

106
00:06:40,890 --> 00:06:44,400
and if I wanted to access the Chrome menu, I could type 'c,'

107
00:06:44,400 --> 00:06:48,010
and you can see in the top right corner of the screen it gets highlighted in green,

108
00:06:48,010 --> 00:06:51,420
press enter, and it shows you what's going on.

109
00:06:51,420 --> 00:06:54,030
[Pettit] Huh. That's pretty cool. >>Really, really good app.

110
00:06:54,030 --> 00:06:57,000
Saves a lot of time.

111
00:06:57,000 --> 00:07:00,750
Well, you know. Gives you a lot of shortcuts with Shortcat.

112
00:07:00,750 --> 00:07:03,800
[Pettit] And, you know, shortcuts are actually one of those interesting things

113
00:07:03,800 --> 00:07:06,980
that, they never seem like they're going to save a lot of time,

114
00:07:06,980 --> 00:07:12,370
but actually moving your mouse around the screen, as lazy as this sounds,

115
00:07:12,370 --> 00:07:16,630
it does take a lot of time to click on small, little buttons.

116
00:07:16,630 --> 00:07:21,770
So anything that you can do with the keyboard is probably going to speed up your workflow.

117
00:07:21,770 --> 00:07:27,150
In fact, Jason introduced me to Gmail shortcuts in 2012.

118
00:07:27,150 --> 00:07:30,810
[Seifer] I don't know how you lived. >>I didn't, Jason. Not until now.

119
00:07:30,810 --> 00:07:33,520
[Seifer] You weren't really living. >>Exactly.

120
00:07:33,520 --> 00:07:40,680
So next up is Enquire.js, which is available at this really long URL

121
00:07:40,680 --> 00:07:42,910
which will be in the lower third.

122
00:07:42,910 --> 00:07:51,910
Basically, Enquire.js is a way for you to include media queries in JavaScript.

123
00:07:51,910 --> 00:08:00,690
[Seifer] So that's what it does. Inquiring minds wanted to know. >>Huh. >>Huh. >>Okay, enough.

124
00:08:00,690 --> 00:08:06,720
This sounds a little bit crazy, and that might be what you're inquiring about, Jason.

125
00:08:06,720 --> 00:08:10,840
Including media queries in your JavaScript sounds a little strange, right?

126
00:08:10,840 --> 00:08:14,320
You normally include media queries in your CSS.

127
00:08:14,320 --> 00:08:17,430
When you're creating a responsive design,

128
00:08:17,430 --> 00:08:20,810
you want to go ahead and create your fluid grid,

129
00:08:20,810 --> 00:08:23,720
and then as that starts to break down towards

130
00:08:23,720 --> 00:08:26,530
smaller and smaller or larger and larger screen sizes,

131
00:08:26,530 --> 00:08:32,470
you use media queries to apply different CSS to change the layout.

132
00:08:32,470 --> 00:08:37,110
Now, in JavaScript, you can actually do something very similar,

133
00:08:37,110 --> 00:08:40,580
but instead of applying different styling,

134
00:08:40,580 --> 00:08:45,670
Enquire.js allows you to apply different JavaScript.

135
00:08:45,670 --> 00:08:50,320
So as you start to get towards a larger screen size or a smaller screen size,

136
00:08:50,320 --> 00:08:54,270
there might be different functions that you want to use

137
00:08:54,270 --> 00:08:58,890
or different pieces of JavaScript entirely.

138
00:08:58,890 --> 00:09:02,350
And you don't necessarily need it in other types of layouts.

139
00:09:02,350 --> 00:09:04,880
So that's pretty handy, because it's probably going to end up

140
00:09:04,880 --> 00:09:10,250
saving you CPU cycles when you're not executing different pieces of code.

141
00:09:10,250 --> 00:09:13,600
So it's pretty nifty. >>I think it'll also clean up your code quite a bit,

142
00:09:13,600 --> 00:09:16,730
whereas rather than hooking in to the window resize event

143
00:09:16,730 --> 00:09:19,930
and checking the width and duplicating all of that,

144
00:09:19,930 --> 00:09:22,150
just put in the media query. >>Yeah, exactly.

145
00:09:22,150 --> 00:09:25,550
And the nice thing about it is it's super, super tiny.

146
00:09:25,550 --> 00:09:30,940
I think it's only like a kilobyte or less, something like that.

147
00:09:30,940 --> 00:09:34,260
And it doesn't have any dependencies, so you don't need jQuery.

148
00:09:34,260 --> 00:09:38,480
You can just go ahead and use Enquire.js in your next web project

149
00:09:38,480 --> 00:09:43,430
and enjoy blissful JavaScript goodness.

150
00:09:43,430 --> 00:09:45,830
[Seifer] That, I think, is the show title.

151
00:09:45,830 --> 00:09:48,340
"Blissful JavaScript Goodness." >>Got it.

152
00:09:48,340 --> 00:09:52,370
[Seifer] Next up, there is a great blog post over on the NetTuts blog

153
00:09:52,370 --> 00:09:55,920
on how to customize your command prompt.

154
00:09:55,920 --> 00:09:58,930
As you may have been able to tell with the Shortcat review,

155
00:09:58,930 --> 00:10:02,250
I really like knowing exactly what's going on on my system

156
00:10:02,250 --> 00:10:05,740
and having shortcuts going around.

157
00:10:05,740 --> 00:10:08,410
So if you're working in the terminal a lot,

158
00:10:08,410 --> 00:10:12,380
this blog post will show you what you can do to customize different parts of it.

159
00:10:12,380 --> 00:10:15,500
So if you want to see what Git branch you're on

160
00:10:15,500 --> 00:10:18,290
or what directory you're currently in,

161
00:10:18,290 --> 00:10:21,650
as well as the name of your computer, in this case, Mothership.

162
00:10:21,650 --> 00:10:23,970
That's an okay name; I don't know if I'm totally sold.

163
00:10:23,970 --> 00:10:28,130
I would probably go with something different, like Battlestar.

164
00:10:28,130 --> 00:10:31,240
So this is just a really thorough blog post on how to go through

165
00:10:31,240 --> 00:10:34,660
and customize your command prompt as well as some other tips

166
00:10:34,660 --> 00:10:38,410
on maybe using a different command prompt or command shell.

167
00:10:38,410 --> 00:10:41,350
So check that out. We'll have that in the show notes as well,

168
00:10:41,350 --> 00:10:43,350
which is on our YouTube channel.

169
00:10:43,350 --> 00:10:46,440
[Pettit] At youtube.com/gotreehouse. >>Yes.

170
00:10:46,440 --> 00:10:50,790
[Pettit] Thank you. All right, next up is Grid-A-Licious,

171
00:10:50,790 --> 00:10:53,700
and this is a really, really cool project

172
00:10:53,700 --> 00:10:56,090
that's actually been around for quite some time.

173
00:10:56,090 --> 00:11:00,250
It's been around since 2008. >>So why are we talking about it now?

174
00:11:00,250 --> 00:11:02,920
[Pettit] Well, Jason, because it's still relevant.

175
00:11:02,920 --> 00:11:06,810
I'm just going to go ahead and click around a little bit here.

176
00:11:06,810 --> 00:11:10,380
So if I go ahead and click on these small little icons

177
00:11:10,380 --> 00:11:14,670
that represent various device screen sizes,

178
00:11:14,670 --> 00:11:20,370
you can see how Grid-A-Licious responds to those sizes.

179
00:11:20,370 --> 00:11:23,380
[Seifer] Oh, it looks like it reflows your grid. >>Exactly.

180
00:11:23,380 --> 00:11:25,390
Now-- >>That's delicious!

181
00:11:25,390 --> 00:11:28,230
[Pettit] If I go ahead and scroll down here,

182
00:11:28,230 --> 00:11:30,810
you can see that the cool thing about Grid-A-Licious

183
00:11:30,810 --> 00:11:41,140
is that it compacts all of those different little divs, or boxes, into a smaller space.

184
00:11:41,140 --> 00:11:46,150
Because sometimes when you have a row of elements that are different heights,

185
00:11:46,150 --> 00:11:49,760
you'll get some weird spacing when you go down to the next row,

186
00:11:49,760 --> 00:11:54,080
because if an element is really short and it's next to a really tall element,

187
00:11:54,080 --> 00:11:58,120
you'll still have all of that space below the shorter one.

188
00:11:58,120 --> 00:12:04,840
But the nice thing about Grid-A-Licious is that it compacts all those and sticks them all together.

189
00:12:04,840 --> 00:12:08,970
So if you've ever checked out, say, Pinterest, this is kind of the layout that they have.

190
00:12:08,970 --> 00:12:12,970
It's all sort of squished together. >>Oh, nice.

191
00:12:12,970 --> 00:12:15,080
So they can recreate Pinterest. >>Exactly.

192
00:12:15,080 --> 00:12:20,410
If you're looking to recreate Pinterest, this would be a great way to get started.

193
00:12:20,410 --> 00:12:23,260
Now, in these examples you can go ahead and see what happens

194
00:12:23,260 --> 00:12:28,360
when you append various elements, and they're randomly sized.

195
00:12:28,360 --> 00:12:33,210
You can also prepend rows, and you can see how those might get filled in.

196
00:12:33,210 --> 00:12:37,610
So it's pretty nifty, and, of course, this has been around a while,

197
00:12:37,610 --> 00:12:41,790
but the thing that's new about it is that it's now responsive,

198
00:12:41,790 --> 00:12:44,670
which is-- >>A thing. >>It's a thing.

199
00:12:44,670 --> 00:12:48,700
It's pretty important. >>I guess. >>Yeah.

200
00:12:48,700 --> 00:12:50,700
[Seifer] That's a cool project. >>Yeah, very cool.

201
00:12:50,700 --> 00:12:52,720
I'm really pretty impressed by it.

202
00:12:52,720 --> 00:12:59,040
[Seifer] It's delicious. >>Love it.

203
00:12:59,040 --> 00:13:01,770
[Seifer] All right. Well, I think that's about out of time for us.

204
00:13:01,770 --> 00:13:03,720
[Pettit] Jason, what did we learn today?

205
00:13:03,720 --> 00:13:07,330
[Seifer] We learned that we're actually moving backwards in web time.

206
00:13:07,330 --> 00:13:11,690
[Pettit] It's true. Screens are getting smaller, devices are getting slower,

207
00:13:11,690 --> 00:13:14,470
and there's less and less bandwidth all the time.

208
00:13:14,470 --> 00:13:16,470
Eventually, we're going to end up at a singularity,

209
00:13:16,470 --> 00:13:19,490
where there's just no Internet at all.

210
00:13:19,490 --> 00:13:21,550
[Seifer] I do not look forward to that day. >>Yeah.

211
00:13:21,550 --> 00:13:23,580
I think it's the end of 2012, from what I've heard. >>Uh-oh.

212
00:13:23,580 --> 00:13:28,720
Wow. I've got some emails to send and some web browsing to do.

213
00:13:28,720 --> 00:13:31,300
So who are you on Twitter? >>I'm @NICKRP.

214
00:13:31,300 --> 00:13:33,880
[Seifer] And I am @JSEIFER. We want to thank you so much

215
00:13:33,880 --> 00:13:36,570
for tuning in to this episode of The Treehouse Show.

216
00:13:36,570 --> 00:13:41,970
For show notes and more, check out our YouTube channel at youtube.com/gotreehouse.

217
00:13:41,970 --> 00:13:45,130
[Pettit] And, of course, if you'd like to check out more videos like this one,

218
00:13:45,130 --> 00:13:49,280
and learn about web design, web development, iOS, Android, and business,

219
00:13:49,280 --> 00:13:52,540
be sure to check us out at teamtreehouse.com.

220
00:13:52,540 --> 00:13:58,130
That's it for this week, and thank you so much for watching.

221
00:13:58,130 --> 00:14:01,130
[The Treehouse Show]