1
00:00:02,100 --> 00:00:04,090
I'm Nick Pettit. >>I'm Jason Seifer.

2
00:00:04,090 --> 00:00:06,330
[Nick Pettit]: and you're watching The Treehouse Show,

3
00:00:06,330 --> 00:00:09,220
your weekly dose of Internets where we talk about all things web design, 

4
00:00:09,220 --> 00:00:11,090
web development, and more. 

5
00:00:11,090 --> 00:00:13,160
[Jason Seifer]: In this episode, we'll be talking about the

6
00:00:13,160 --> 00:00:16,270
latest JavaScript project and some JavaScript books,

7
00:00:16,270 --> 00:00:18,050
the new Firefox beta, 

8
00:00:18,050 --> 00:00:20,830
and our app review of the week is Moom. 

9
00:00:20,830 --> 00:00:22,490
[Nick Pettit]: Let's check it out. 

10
00:00:22,490 --> 00:00:27,640
[?music playing?]

11
00:00:28,580 --> 00:00:30,760
[Jason Seifer]: The first project that we're going to be talking about this week

12
00:00:30,760 --> 00:00:33,100
is something called, 'Holder.js.'

13
00:00:33,100 --> 00:00:35,980
Holder.js is a piece of JavaScript 

14
00:00:35,980 --> 00:00:37,930
that does image placeholders

15
00:00:37,930 --> 00:00:39,170
for your website. 

16
00:00:39,170 --> 00:00:41,180
The way it works is, you give it an image tag,

17
00:00:41,180 --> 00:00:43,770
and for the source, you specify the path

18
00:00:43,770 --> 00:00:45,520
to Holder.js. 

19
00:00:45,520 --> 00:00:48,680
Add a slash, and then specify the width and height 

20
00:00:48,680 --> 00:00:50,630
that you want the placeholder image. 

21
00:00:50,630 --> 00:00:52,730
This is going to be very, very useful 

22
00:00:52,730 --> 00:00:54,080
when developing sites,

23
00:00:54,080 --> 00:00:56,170
and you maybe don't have all of the images 

24
00:00:56,170 --> 00:00:58,230
that you're going to be using in the final product, 

25
00:00:58,230 --> 00:01:00,870
but you can say something like, "Okay, an ad's going to be here,

26
00:01:00,870 --> 00:01:03,070
it's going to be this size," 

27
00:01:03,070 --> 00:01:05,050
and it will flow right into your content

28
00:01:05,050 --> 00:01:07,370
without, really, any work on your part. 

29
00:01:07,370 --> 00:01:09,240
There are some great examples at the site

30
00:01:09,240 --> 00:01:11,030
of all different size placeholder images,

31
00:01:11,030 --> 00:01:14,050
and you can see right here, it's very, very easy

32
00:01:14,050 --> 00:01:16,900
to use with this image tag--just drop in the source

33
00:01:16,900 --> 00:01:19,110
and the path, and you are good to go. 

34
00:01:19,110 --> 00:01:22,810
This weighs in at only 5 kilobytes, 

35
00:01:22,810 --> 00:01:24,590
so not really too much to put into your site,

36
00:01:24,590 --> 00:01:27,000
especially if you're only showing it to a few people,

37
00:01:27,000 --> 00:01:29,840
since this really is something that you're only going to be using

38
00:01:29,840 --> 00:01:31,570
 in development of a new site. 

39
00:01:31,570 --> 00:01:33,030
[Nick Pettit]: That's really, really cool. 

40
00:01:33,030 --> 00:01:35,210
See, I always like to develop in the browser

41
00:01:35,210 --> 00:01:37,200
with HTML and CSS, so that makes it 

42
00:01:37,200 --> 00:01:39,900
a lot easier to just drop in a placeholder image,

43
00:01:39,900 --> 00:01:43,420
instead of trying to box it out

44
00:01:43,420 --> 00:01:46,270
with a full-colored div that looks really ugly, so--

45
00:01:46,270 --> 00:01:49,360
[Jason Seifer]: Yeah, and especially when the cat placeholders

46
00:01:49,360 --> 00:01:51,070
are taking too long to load. 

47
00:01:51,070 --> 00:01:54,440
[Nick Pettit]: That's true. Those cat placeholders every time. 

48
00:01:54,440 --> 00:01:56,230
[Jason Seifer]: Always a big concern. 

49
00:01:56,230 --> 00:01:59,690
[Nick Pettit]: Alright. Next up is Picturefill,

50
00:01:59,690 --> 00:02:01,760
which is a piece of JavaScript that will allow you

51
00:02:01,760 --> 00:02:04,460
to make your responsive web images

52
00:02:04,460 --> 00:02:07,390
load a lot more quickly. 

53
00:02:07,390 --> 00:02:10,370
Basically, it mimics the proposed

54
00:02:10,370 --> 00:02:13,450
picture element, and it uses divs

55
00:02:13,450 --> 00:02:15,860
instead of the picture element, just for the sake of 

56
00:02:15,860 --> 00:02:19,020
safety and cross-browser compatibility. 

57
00:02:19,020 --> 00:02:21,430
So, if I go ahead and click here 

58
00:02:21,430 --> 00:02:23,230
on their github page, 

59
00:02:23,230 --> 00:02:25,830
we have a little example here,

60
00:02:25,830 --> 00:02:27,610
and I can show you a demo of how this works. 

61
00:02:27,610 --> 00:02:30,610
When I resize my web browser here, 

62
00:02:30,610 --> 00:02:34,100
it will go ahead and load in different images

63
00:02:34,100 --> 00:02:37,070
based on the size of the browser.

64
00:02:37,070 --> 00:02:39,320
[Jason Seifer]: Hey, there's Mike the frog. Hey, Mike. >>[Nick Pettit]: Hey, look at that. 

65
00:02:39,320 --> 00:02:41,620
Now, this is handy,

66
00:02:41,620 --> 00:02:43,090
because you don't want to load in 

67
00:02:43,090 --> 00:02:45,160
a really huge image

68
00:02:45,160 --> 00:02:48,050
if all you really need is a small image

69
00:02:48,050 --> 00:02:50,510
for iPhone or an iPad, or something like that. 

70
00:02:50,510 --> 00:02:52,180
[Jason Seifer]: That's something, especially, that you'll have to

71
00:02:52,180 --> 00:02:55,060
take into account on mobile connections.   >>[Nick Pettit]: That's right. 

72
00:02:55,060 --> 00:02:58,350
[Jason Seifer]: This is also similar to a project we talked about in the last episode

73
00:02:58,350 --> 00:03:00,360
of The Treehouse Show, however, it uses divs

74
00:03:00,360 --> 00:03:04,520
instead of the figure and picture elements. >>[Nick Pettit]: That's right.

75
00:03:04,520 --> 00:03:08,870
[Jason Seifer]: Next up, is a website called whatthekey.com--

76
00:03:08,870 --> 00:03:11,330
oh, I'm sorry, whatthekeycode.com.

77
00:03:11,330 --> 00:03:13,320
If you've ever gone and developed

78
00:03:13,320 --> 00:03:15,150
an app in JavaScript,

79
00:03:15,150 --> 00:03:18,320
occasionally you will need to listen for a key code event. 

80
00:03:18,320 --> 00:03:21,490
This can be a bit difficult to go through and look up

81
00:03:21,490 --> 00:03:23,840
the key code every time,

82
00:03:23,840 --> 00:03:25,670
so you can just go to whatthekeycode.com,

83
00:03:25,670 --> 00:03:27,580
type any key, and it will immediately

84
00:03:27,580 --> 00:03:30,320
give you the JavaScript key code. Take a look at it here. 

85
00:03:30,320 --> 00:03:31,480
I'm going to just go press some keys, 

86
00:03:31,480 --> 00:03:33,620
and you can see as I am pressing them

87
00:03:33,620 --> 00:03:35,460
on the site,

88
00:03:35,460 --> 00:03:38,860
it is displaying the different numbers. [Nick Pettit]: That's pretty handy. 

89
00:03:38,860 --> 00:03:41,850
[Jason Seifer]: It is, and that's whatthekeycode.com

90
00:03:41,850 --> 00:03:44,720
in case you forget. [Nick Pettit]: Got it memorized. 

91
00:03:44,720 --> 00:03:47,500
Wait, what was that again? [Jason Seifer]: whatthekeycode.com. 

92
00:03:47,500 --> 00:03:49,510
[Nick Pettit]: Okay, I got it this time. 

93
00:03:49,510 --> 00:03:52,190
Next up, is normalize.css

94
00:03:52,190 --> 00:03:57,380
at necolas.github.com/normalize.css.

95
00:03:57,380 --> 00:03:59,830
I think that's how you pronounce it. [Jason Seifer]: Good enough. 

96
00:03:59,830 --> 00:04:02,130
[Nick Pettit]: Basically, when you're coding websites,

97
00:04:02,130 --> 00:04:05,740
you need to drop in some reset CSS.

98
00:04:05,740 --> 00:04:09,320
Reset CSS will remove the default styling that the browser applies,

99
00:04:09,320 --> 00:04:11,640
and it will remove all that default padding

100
00:04:11,640 --> 00:04:14,980
and margin and, basically, create a level playing field,

101
00:04:14,980 --> 00:04:17,730
so that it's easier to code your websites

102
00:04:17,730 --> 00:04:20,160
across different browsers. 

103
00:04:20,160 --> 00:04:22,260
So, after you drop in your reset CSS, 

104
00:04:22,260 --> 00:04:25,020
you can go ahead and apply your own styling

105
00:04:25,020 --> 00:04:27,060
on top of that. 

106
00:04:27,060 --> 00:04:30,300
Normalize is interesting, because it's 

107
00:04:30,300 --> 00:04:32,040
a modern HTML5-ready alternative

108
00:04:32,040 --> 00:04:34,370
to CSS resets. 

109
00:04:34,370 --> 00:04:36,790
So, basically, there's been a lot of CSS resets

110
00:04:36,790 --> 00:04:38,730
in the past,

111
00:04:38,730 --> 00:04:40,820
and this is just the latest and greatest one. 

112
00:04:40,820 --> 00:04:42,850
[Jason Seifer]: This is the reset of the future.

113
00:04:42,850 --> 00:04:44,680
[Nick Pettit]: That's right.  

114
00:04:44,680 --> 00:04:47,320
[Jason Seifer]: The present-future of past resets.

115
00:04:47,320 --> 00:04:49,070
[Nick Pettit]: Tomorrow is today. 

116
00:04:49,070 --> 00:04:51,480
[Jason Seifer]: Well, I think that is a great time to segue-way

117
00:04:51,480 --> 00:04:53,680
to our app review of the week. 

118
00:04:53,680 --> 00:04:55,880
[Nick Petti]: Let's check it out. 

119
00:04:55,880 --> 00:05:00,150
[?music playing?]

120
00:05:00,150 --> 00:05:02,090
[Jason Seifer]: This week the app we're going to be taking a look at 

121
00:05:02,090 --> 00:05:04,570
is called, 'Moom' by Many Tricks,

122
00:05:04,570 --> 00:05:08,450
and you can get that at manytricks.com/moom.

123
00:05:08,450 --> 00:05:10,720
So, what does Moom do?

124
00:05:10,720 --> 00:05:13,340
This is something that has turned out to be

125
00:05:13,340 --> 00:05:15,860
an invaluable app for me. 

126
00:05:15,860 --> 00:05:17,560
This is an OS10 application 

127
00:05:17,560 --> 00:05:20,750
where--you see this little zoom button on the top left?

128
00:05:20,750 --> 00:05:22,610
It gives you a menu right there.

129
00:05:22,610 --> 00:05:24,270
Below that menu, is a few buttons 

130
00:05:24,270 --> 00:05:26,040
and a grid. 

131
00:05:26,040 --> 00:05:28,660
What this lets you do is, you can draw on this grid,

132
00:05:28,660 --> 00:05:31,810
and it will resize the topmost window 

133
00:05:31,810 --> 00:05:34,610
to be the size of that grid. 

134
00:05:34,610 --> 00:05:36,790
It can also take it to fullscreen, 

135
00:05:36,790 --> 00:05:38,980
and this is very useful 

136
00:05:38,980 --> 00:05:40,230
if you've got something 

137
00:05:40,230 --> 00:05:42,080
like a text editor and a 

138
00:05:42,080 --> 00:05:44,400
Markdown editor side by side. 

139
00:05:44,400 --> 00:05:46,620
You can go ahead, click in there, it's got predefined sizes,

140
00:05:46,620 --> 00:05:48,750
or you can define your own.

141
00:05:48,750 --> 00:05:51,490
One thing that's really, really useful 

142
00:05:51,490 --> 00:05:53,030
about Moom is that you can even assign

143
00:05:53,030 --> 00:05:56,080
custom key codes to the different sizes

144
00:05:56,080 --> 00:05:58,030
and have it apply to different applications.

145
00:05:58,030 --> 00:06:00,090
Myself, when I'm coding a site 

146
00:06:00,090 --> 00:06:02,160
using Rails, I've got a terminal open, 

147
00:06:02,160 --> 00:06:04,920
text editor, and a browser, and with 1 keystroke

148
00:06:04,920 --> 00:06:06,440
you can have these all resized

149
00:06:06,440 --> 00:06:09,690
to your preferred dimensions and layout. 

150
00:06:09,690 --> 00:06:12,290
Like I said, this can be extremely useful when going

151
00:06:12,290 --> 00:06:15,140
from a laptop with an external monitor,

152
00:06:15,140 --> 00:06:17,290
back and forth between the laptop--

153
00:06:17,290 --> 00:06:19,610
save you the time of resizing all these things. 

154
00:06:19,610 --> 00:06:24,190
This is not a sponsored review of the show, 

155
00:06:24,190 --> 00:06:26,730
this is just something that I find invaluable. 

156
00:06:26,730 --> 00:06:29,030
[Nick Pettit]: Shame on them. [Jason Seifer]: Shame on them, indeed. 

157
00:06:29,030 --> 00:06:31,170
[Nick Pettit]: You know, that's really interesting, 

158
00:06:31,170 --> 00:06:33,840
because one of the very few features from Windows,

159
00:06:33,840 --> 00:06:36,220
particularly Windows 7, that I really like, 

160
00:06:36,220 --> 00:06:38,280
is that you can drag

161
00:06:38,280 --> 00:06:41,000
windows to the left and right of the screen,

162
00:06:41,000 --> 00:06:43,490
or I think you can drag them to the top

163
00:06:43,490 --> 00:06:45,530
or something like that, and it will make them go fullscreen

164
00:06:45,530 --> 00:06:48,890
or take up 1 side of the screen or the other,

165
00:06:48,890 --> 00:06:50,170
so you can look at things side-by-side, 

166
00:06:50,170 --> 00:06:53,060
but that brings this functionality to--

167
00:06:53,060 --> 00:06:55,200
[Jason Seifer]: Oh, this does that, too, I didn't even mention it. 

168
00:06:55,200 --> 00:06:58,500
[Nick Pettit]: --brings it to Mac OS10, so that's pretty nifty. 

169
00:06:58,500 --> 00:07:02,340
Next up is HTML5 Boilerplate 

170
00:07:02,340 --> 00:07:05,350
and, speaking of CSS reset code,

171
00:07:05,350 --> 00:07:07,280
this is actually kind of the 

172
00:07:07,280 --> 00:07:09,530
ultimate reset, in a way.

173
00:07:09,530 --> 00:07:12,040
It's basically some HTML, 

174
00:07:12,040 --> 00:07:14,240
some CSS, and a few other things

175
00:07:14,240 --> 00:07:16,980
that will give you a good, solid foundation

176
00:07:16,980 --> 00:07:21,160
for building an HTML 5.0 future-ready website. 

177
00:07:21,160 --> 00:07:23,460
[Jason Seifer]: Now, this is brand new, right?

178
00:07:23,460 --> 00:07:26,280
[Nick Pettit]: It's not brand new, Jason. I'm so glad you mentioned that.

179
00:07:26,280 --> 00:07:28,810
 This is, actually, the 4.0 version,

180
00:07:28,810 --> 00:07:30,890
but if you haven't checked out Boilerplate before,

181
00:07:30,890 --> 00:07:32,910
you should definitely take a look.

182
00:07:32,910 --> 00:07:36,810
It's available at html5boilerplate.com,

183
00:07:36,810 --> 00:07:38,980
and in version 4.0,

184
00:07:38,980 --> 00:07:40,850
look at that,

185
00:07:40,850 --> 00:07:43,320
they're using normalize.css,

186
00:07:43,320 --> 00:07:48,510
a modern HTML5-ready alternative to CSS resets, which we just discussed. 

187
00:07:48,510 --> 00:07:50,690
It also includes the latest versions 

188
00:07:50,690 --> 00:07:53,330
of jQuery and Modernizr,

189
00:07:53,330 --> 00:07:55,160
and it loads them in via Google CDN,

190
00:07:55,160 --> 00:07:57,520
so you know that it's going to be 

191
00:07:57,520 --> 00:08:00,080
super-duper fast and super-reliable. 

192
00:08:00,080 --> 00:08:02,070
So, if you're starting a new web project, 

193
00:08:02,070 --> 00:08:04,950
Boilerplate is a pretty good 

194
00:08:04,950 --> 00:08:07,220
way to go, and then you can go ahead and 

195
00:08:07,220 --> 00:08:10,140
drop in your other features on top of that. 

196
00:08:10,140 --> 00:08:14,370
[Jason Seifer]: Nice. So next up, Firefox Beta 16--

197
00:08:14,370 --> 00:08:16,970
Firefox 16 Beta 1

198
00:08:16,970 --> 00:08:18,950
has just recently been released.

199
00:08:18,950 --> 00:08:21,710
Something that's really useful for developers

200
00:08:21,710 --> 00:08:24,290
in this version, is a new console

201
00:08:24,290 --> 00:08:26,530
that's going to let you have a command line

202
00:08:26,530 --> 00:08:28,920
interface to Firefox itself. 

203
00:08:28,920 --> 00:08:30,260
What can you do with that?

204
00:08:30,260 --> 00:08:32,159
Well, I'm glad you asked. 

205
00:08:32,159 --> 00:08:34,360
You can go through and actually control

206
00:08:34,360 --> 00:08:36,230
different parts of the browser experience. 

207
00:08:36,230 --> 00:08:39,260
You can manipulate the showing of the inspector.

208
00:08:39,260 --> 00:08:42,039
So, you can say something like "inspect,"

209
00:08:42,039 --> 00:08:44,950
give it a CSS path to what you want to inspect, 

210
00:08:44,950 --> 00:08:46,920
and it will bring that right up. 

211
00:08:46,920 --> 00:08:49,560
You can clear the console and open the console

212
00:08:49,560 --> 00:08:51,900
from the command line. 

213
00:08:51,900 --> 00:08:53,410
Something that I find really interesting, 

214
00:08:53,410 --> 00:08:56,680
though, is you can resize the browser as well

215
00:08:56,680 --> 00:09:00,260
by just saying "resize to" and give it different dimensions. 

216
00:09:00,260 --> 00:09:02,880
This is going to be really useful when,

217
00:09:02,880 --> 00:09:04,630
say, testing your responsive designs

218
00:09:04,630 --> 00:09:07,770
inside of the Firefox browser. 

219
00:09:07,770 --> 00:09:10,270
And finally, another feature that I really like 

220
00:09:10,270 --> 00:09:12,720
is the option to have screenshots

221
00:09:12,720 --> 00:09:14,870
right from the command line, 

222
00:09:14,870 --> 00:09:17,090
and you can even give it different IDs

223
00:09:17,090 --> 00:09:19,430
 of what you want to have screenshots of,

224
00:09:19,430 --> 00:09:21,210
and Firefox will save them for you.

225
00:09:21,210 --> 00:09:24,660
So, pretty interesting developments for developers

226
00:09:24,660 --> 00:09:27,890
in the latest beta of Firefox. 

227
00:09:27,890 --> 00:09:29,830
So, check that out if you get the chance. 

228
00:09:29,830 --> 00:09:31,780
Still need to be testing on Firefox.

229
00:09:31,780 --> 00:09:33,940
[Nick Pettit]: That's pretty nifty. 

230
00:09:33,940 --> 00:09:36,160
Next up, just a quick little thing, 

231
00:09:36,160 --> 00:09:44,860
JSbooks, available at jsbooks.revolunet--like revolution, I guess--.com,

232
00:09:44,860 --> 00:09:47,330
and in a previous episode 

233
00:09:47,330 --> 00:09:49,380
we covered something pretty similar to this

234
00:09:49,380 --> 00:09:52,350
that showed a whole bunch of useful Python books. 

235
00:09:52,350 --> 00:09:54,350
Well, this is just a list of 

236
00:09:54,350 --> 00:09:57,350
all the best JavaScript books. 

237
00:09:57,350 --> 00:09:59,320
JavaScript, of course, being the language

238
00:09:59,320 --> 00:10:02,260
that creates the behavioral layer

239
00:10:02,260 --> 00:10:05,380
in HTML, CSS, and JavaScript. 

240
00:10:05,380 --> 00:10:07,360
So, pretty nifty

241
00:10:07,360 --> 00:10:10,480
 if you're looking to learn with books.

242
00:10:10,480 --> 00:10:12,570
Of course, if you want to learn about JavaScript

243
00:10:12,570 --> 00:10:16,040
on video, you should check out teamtreehouse.com. 

244
00:10:16,040 --> 00:10:18,990
[Jason Seifer]: Shameless self-promotion. >>[Nick Pettit]: Shameless.

245
00:10:18,990 --> 00:10:20,070
[Jason Seifer]: Next up, 

246
00:10:20,070 --> 00:10:22,810
just another quick heads-up. 

247
00:10:22,810 --> 00:10:24,580
There is a theme that recently gained popularity. 

248
00:10:24,580 --> 00:10:26,440
This is a theme for your text editors,

249
00:10:26,440 --> 00:10:28,330
and this is called the 'Tomorrow' theme,

250
00:10:28,330 --> 00:10:32,240
and it is pretty, without being overbearing. 

251
00:10:32,240 --> 00:10:36,260
It has different configurations for 

252
00:10:36,260 --> 00:10:39,140
Vim, TextMate, Sublime--whatever you're using these days. 

253
00:10:39,140 --> 00:10:41,310
There's dark and light versions,

254
00:10:41,310 --> 00:10:44,570
and pretty much any editor

255
00:10:44,570 --> 00:10:46,480
that has gained popularity recently

256
00:10:46,480 --> 00:10:48,770
will have a version of the Tomorrow theme. 

257
00:10:48,770 --> 00:10:50,250
Very pleasant to look at 

258
00:10:50,250 --> 00:10:52,610
and easy on the eyes, which is something that you're going to be looking for

259
00:10:52,610 --> 00:10:55,050
when you stare at text all day. 

260
00:10:55,050 --> 00:10:58,270
[Nick Pettit]: Very, very true. When you do look at text all day long, 

261
00:10:58,270 --> 00:11:00,960
you definitely want to have a pretty nice-looking theme. 

262
00:11:00,960 --> 00:11:04,240
Seems like a small thing, but it really does 

263
00:11:04,240 --> 00:11:06,040
affect the way you work. 

264
00:11:06,040 --> 00:11:08,140
So, Jason, what have we learned today?

265
00:11:08,140 --> 00:11:11,110
[Jason Seifer]: We learned that Firefox is pretty awesome

266
00:11:11,110 --> 00:11:13,250
for its developer tools in the latest beta,

267
00:11:13,250 --> 00:11:15,100
and that we should all check that out. 

268
00:11:15,100 --> 00:11:17,310
[Nick Pettit]: I would have to agree. 

269
00:11:17,310 --> 00:11:20,050
Thank you guys so much for watching. I'm @NICKRP on Twitter. 

270
00:11:20,050 --> 00:11:22,790
[Jason Seifer]: I'm @JSEIFER. Thanks so much for tuning in

271
00:11:22,790 --> 00:11:24,960
to this episode of The Treehouse Show.

272
00:11:24,960 --> 00:11:26,360
For show notes and more, 

273
00:11:26,360 --> 00:11:28,020
check out our YouTube channel

274
00:11:28,020 --> 00:11:30,340
at YouTube.com/gotreehouse.

275
00:11:30,340 --> 00:11:33,720
[Nick Pettit]: This episode was brought to you by Treehouse, 

276
00:11:33,720 --> 00:11:35,390
the best way to learn web design, web development, 

277
00:11:35,390 --> 00:11:37,140
mobile business, and more. 

278
00:11:37,140 --> 00:11:39,510
You can check us out at teamtreehouse.com

279
00:11:39,510 --> 00:11:41,850
We'll see you next week. 

280
00:11:42,340 --> 00:11:46,550
[?music playing?]