1
00:00:01,940 --> 00:00:02,520
>>I'm Nick Pettit.

2
00:00:02,520 --> 00:00:04,040
>>I'm Jason Seifer.

3
00:00:04,040 --> 00:00:06,970
>>And you're watching The Treehouse Show, your weekly dose of Internets,

4
00:00:06,970 --> 00:00:09,250
where we talk about all things web design,

5
00:00:09,250 --> 00:00:10,630
web development, and more.

6
00:00:10,630 --> 00:00:13,220
>>In this episode, we'll be taking a look at Fokus

7
00:00:13,220 --> 00:00:15,260
using Internet Explorer or on your Mac

8
00:00:15,260 --> 00:00:18,490
and a nifty bookmarklet called DOM Monster.

9
00:00:18,490 --> 00:00:20,250
>>Let's check it out!

10
00:00:20,250 --> 00:00:26,120
[??]

11
00:00:26,120 --> 00:00:28,250
>>First up is Fokus.

12
00:00:28,250 --> 00:00:30,850
>>Nick, what do you think your favorite flavor of ice cream is?

13
00:00:30,850 --> 00:00:33,440
>>Jason, let's try to stay focused.

14
00:00:33,440 --> 00:00:34,580
>>Sounds good.

15
00:00:34,580 --> 00:00:35,720
>>It's Neapolitan, by the way.

16
00:00:35,720 --> 00:00:36,770
>>Neapolitan?

17
00:00:36,770 --> 00:00:39,860
>>Yup, and Fokus is not spelled the way that you normal spell it.

18
00:00:39,860 --> 00:00:43,560
It's spelled F-O-K-U-S,

19
00:00:43,560 --> 00:00:47,030
and it's basically this nifty little piece of JavaScript

20
00:00:47,030 --> 00:00:49,310
that you can include on your web page,

21
00:00:49,310 --> 00:00:51,470
and when you go to highlight text,

22
00:00:51,470 --> 00:00:54,610
it will actually black out the rest of the web page

23
00:00:54,610 --> 00:00:57,570
and only show you the highlighted text.

24
00:00:57,570 --> 00:01:00,550
You could use this for a number of different reasons,

25
00:01:00,550 --> 00:01:04,180
maybe if you're building web-based presentation software

26
00:01:04,180 --> 00:01:06,350
and you want to highlight something in particular,

27
00:01:06,350 --> 00:01:08,530
or if you're showing a web page

28
00:01:08,530 --> 00:01:11,650
and doing it like in a presentation format

29
00:01:11,650 --> 00:01:14,050
and you want to just show a particular piece of the web page,

30
00:01:14,050 --> 00:01:15,870
it's really a good to do that.

31
00:01:15,870 --> 00:01:17,610
>>I'm gonna go with Cherry Garcia.

32
00:01:17,610 --> 00:01:19,150
>>Alright, sounds good.

33
00:01:19,150 --> 00:01:22,360
>>Next up, there is a new version of Flowplayer out.

34
00:01:22,360 --> 00:01:25,850
Flowplayer 5 uses the video element

35
00:01:25,850 --> 00:01:29,650
to display videos in HTML5.

36
00:01:29,650 --> 00:01:31,420
What's new in Flowplayer?

37
00:01:31,420 --> 00:01:33,770
Well, it is responsive,

38
00:01:33,770 --> 00:01:35,230
which is something that we all talk about

39
00:01:35,230 --> 00:01:37,230
on this show

40
00:01:37,230 --> 00:01:39,020
I think a little bit too much,

41
00:01:39,020 --> 00:01:41,910
but Flowplayer is something people used a lot before.

42
00:01:41,910 --> 00:01:43,970
What was great about it is that

43
00:01:43,970 --> 00:01:46,480
if HTML5 is available, it'll use that;

44
00:01:46,480 --> 00:01:49,110
if not, it can always fall back to using Flash

45
00:01:49,110 --> 00:01:51,080
to display video.

46
00:01:51,080 --> 00:01:52,680
Probably the best part about the new Flowplayer

47
00:01:52,680 --> 00:01:54,320
is it's very minimal

48
00:01:54,320 --> 00:01:57,060
and also very easily skinnable,

49
00:01:57,060 --> 00:01:59,470
as well as being very easy to use,

50
00:01:59,470 --> 00:02:01,600
so you can check that out at flowplayer.org

51
00:02:01,600 --> 00:02:03,550
and we'll have a link to that in the show notes

52
00:02:03,550 --> 00:02:06,040
which you can check out on our YouTube channel.

53
00:02:06,040 --> 00:02:07,410
>>Pretty nifty.

54
00:02:07,410 --> 00:02:10,250
Next up is this really cool blog post from the BBC called

55
00:02:10,250 --> 00:02:12,780
Cutting the Mustard.

56
00:02:12,780 --> 00:02:15,260
Their web site is Responsive News,

57
00:02:15,260 --> 00:02:17,800
but then there's this post called Cutting the Mustard,

58
00:02:17,800 --> 00:02:19,510
which basically describes

59
00:02:19,510 --> 00:02:23,400
this technique for progressive enhancement.

60
00:02:23,400 --> 00:02:27,040
This very post is resorting to some old-school methods

61
00:02:27,040 --> 00:02:29,930
that haven't been used in 

62
00:02:29,930 --> 00:02:31,810
I guess not quite some time,

63
00:02:31,810 --> 00:02:34,580
but the author feels like people have generally forgotten

64
00:02:34,580 --> 00:02:36,340
about them.

65
00:02:36,340 --> 00:02:38,450
>>In this age of band with gluttony,

66
00:02:38,450 --> 00:02:40,330
we have to return to making our sites 

67
00:02:40,330 --> 00:02:42,350
just a little bit more minimal.

68
00:02:42,350 --> 00:02:44,590
>>So the author is describing this technique 

69
00:02:44,590 --> 00:02:47,200
for just building the HTML 

70
00:02:47,200 --> 00:02:50,090
for the most basic experience possible,

71
00:02:50,090 --> 00:02:52,530
and then adding JavaScript on top of that

72
00:02:52,530 --> 00:02:54,090
as an enhancement. 

73
00:02:54,090 --> 00:02:56,090
>>Right, and then I think you also mentioned

74
00:02:56,090 --> 00:02:59,180
using the native implementations if the browser supports it

75
00:02:59,180 --> 00:03:01,310
rather than falling back to a huge library

76
00:03:01,310 --> 00:03:04,820
that maybe doesn't contain everything that you want.

77
00:03:04,820 --> 00:03:07,120
>>It is really refreshing to see when 

78
00:03:07,120 --> 00:03:09,190
there's so many libraries that

79
00:03:09,190 --> 00:03:10,190
are getting pretty huge,

80
00:03:10,190 --> 00:03:12,340
and you have to include so many of them

81
00:03:12,340 --> 00:03:14,350
to build kind of a modern front-end experience.

82
00:03:14,350 --> 00:03:17,290
>>Exactly--a blog post worth reading?

83
00:03:17,290 --> 00:03:19,390
>>It's definitely work reading.

84
00:03:19,390 --> 00:03:22,200
It is a little bit long, but we just gave you the tl;dr,

85
00:03:22,200 --> 00:03:24,390
so you can go ahead and read more if you'd like.

86
00:03:24,390 --> 00:03:26,130
>>Awesome.

87
00:03:26,130 --> 00:03:29,480
Next up, over on the OSX Daily Blog,

88
00:03:29,480 --> 00:03:32,310
there's a really awesome blog post

89
00:03:32,310 --> 00:03:34,140
on installing Internet Explorer for the Mac

90
00:03:34,140 --> 00:03:36,510
the easy way.

91
00:03:36,510 --> 00:03:40,200
This is a way to run IE7, 8, and 9 for free

92
00:03:40,200 --> 00:03:42,150
in a virtual machine.

93
00:03:42,150 --> 00:03:43,440
>>Whoa, for free?

94
00:03:43,440 --> 00:03:45,280
>>For free; now this is actually an old blog post,

95
00:03:45,280 --> 00:03:47,660
but since we are talking about 

96
00:03:47,660 --> 00:03:49,010
progressive enhancement,

97
00:03:49,010 --> 00:03:51,400
it is kind of worth noting that you can still do this.

98
00:03:51,400 --> 00:03:53,850
There are free images provided by Microsoft

99
00:03:53,850 --> 00:03:55,490
for Windows

100
00:03:55,490 --> 00:03:57,640
with versions of IE7, 8, and 9 on them,

101
00:03:57,640 --> 00:03:59,880
and then this is just a quick post detailing

102
00:03:59,880 --> 00:04:01,250
how to do that

103
00:04:01,250 --> 00:04:04,060
and use Open Source Virtualization software

104
00:04:04,060 --> 00:04:07,200
to get that all set up on your Mack, so check that out.

105
00:04:07,200 --> 00:04:10,490
>>Very nifty; so next up is this really cool web site

106
00:04:10,490 --> 00:04:13,440
at WebPlatform.org.

107
00:04:13,440 --> 00:04:15,160
This is brand new,

108
00:04:15,160 --> 00:04:17,610
and it's basically only documentation for 

109
00:04:17,610 --> 00:04:21,750
the normal front-end web stuff that you would expect,

110
00:04:21,750 --> 00:04:24,730
like HTML, CSS, and more.

111
00:04:24,730 --> 00:04:27,600
This is all organized by the W3C

112
00:04:27,600 --> 00:04:30,400
and a number of other big-name companies

113
00:04:30,400 --> 00:04:34,180
and it's just basically really good documentation.

114
00:04:34,180 --> 00:04:37,110
It's kind of a community project,

115
00:04:37,110 --> 00:04:39,830
so at this stage, it's a little bit rough.

116
00:04:39,830 --> 00:04:42,770
I looked at actually the header element

117
00:04:42,770 --> 00:04:45,790
in HTML5, and there was hardly any documentation there,

118
00:04:45,790 --> 00:04:48,060
but I would imagine all of that stuff is going to 

119
00:04:48,060 --> 00:04:50,460
get filled out pretty quickly.

120
00:04:50,460 --> 00:04:52,690
>>Yeah, they're working on it.

121
00:04:52,690 --> 00:04:56,530
Right now, it's basically an import of content that was already on Microsoft's site,

122
00:04:56,530 --> 00:05:00,070
Google, Mozilla Docs.

123
00:05:00,070 --> 00:05:03,350
Their goal is to have 1 centralized spot

124
00:05:03,350 --> 00:05:06,110
for knowledge about the latest standards

125
00:05:06,110 --> 00:05:09,180
from a lot of the browser vendors that implement them.

126
00:05:09,180 --> 00:05:11,420
So it looks like a really worthwhile project,

127
00:05:11,420 --> 00:05:13,480
so go ahead and get involved with that if you can.

128
00:05:13,480 --> 00:05:15,370
>>Very cool stuff.

129
00:05:15,370 --> 00:05:18,120
>>Next up, we have a piece of JavaScript

130
00:05:18,120 --> 00:05:20,130
called KeyMaster.

131
00:05:20,130 --> 00:05:22,120
This is really awesome.

132
00:05:22,120 --> 00:05:26,540
It's a simple library for defining keystrokes in JavaScript.

133
00:05:26,540 --> 00:05:30,020
This can actually be a really cumbersome thing to do

134
00:05:30,020 --> 00:05:32,280
when writing web pages,

135
00:05:32,280 --> 00:05:35,280
so you get this one global method called key

136
00:05:35,280 --> 00:05:38,130
and you can pass key a string

137
00:05:38,130 --> 00:05:40,740
and inside of that string, you can abbreviate 

138
00:05:40,740 --> 00:05:43,150
the different keystrokes that you want

139
00:05:43,150 --> 00:05:45,260
and then pass it a function

140
00:05:45,260 --> 00:05:48,580
and this will go ahead and call that function every time that key is pressed.

141
00:05:48,580 --> 00:05:50,590
This is very useful for 

142
00:05:50,590 --> 00:05:52,960
abstracting away shortcut keys

143
00:05:52,960 --> 00:05:54,450
inside of your application

144
00:05:54,450 --> 00:05:56,970
and just having 1 common interface

145
00:05:56,970 --> 00:05:58,470
is very easy to do

146
00:05:58,470 --> 00:06:00,480
rather than having to look up the key code all of the time,

147
00:06:00,480 --> 00:06:03,410
although we did cover what the key code on a previous--

148
00:06:03,410 --> 00:06:06,510
>>Right, that tool where you can go ahead and look up key codes really quickly.

149
00:06:06,510 --> 00:06:08,090
And that's helpful

150
00:06:08,090 --> 00:06:11,060
but this is perhaps even more helpful.

151
00:06:11,060 --> 00:06:13,690
>>We're always one-upping ourselves here on the Treehouse Show.

152
00:06:13,690 --> 00:06:16,530
Or are we?

153
00:06:16,530 --> 00:06:18,570
>>Next up is

154
00:06:18,570 --> 00:06:20,420
DOM Monster,

155
00:06:20,420 --> 00:06:22,330
which is a project from Thomas Fuchs

156
00:06:22,330 --> 00:06:24,020
and Amy Hoy.

157
00:06:24,020 --> 00:06:25,620
>>Are you sure you're pronouncing that name right?

158
00:06:25,620 --> 00:06:28,310
>>I'm pretty sure I pronounced it just right; thanks, Jason.

159
00:06:28,310 --> 00:06:30,340
Basically, it's just a 

160
00:06:30,340 --> 00:06:32,200
little book marklet

161
00:06:32,200 --> 00:06:35,820
that you can grab and put into your Bookmarks toolbar

162
00:06:35,820 --> 00:06:39,330
and of course, it has this scary little monster there.

163
00:06:39,330 --> 00:06:40,870
>>Really scary.

164
00:06:40,870 --> 00:06:42,920
>>So I'm going to go ahead and bring up my Bookmarks toolbar

165
00:06:42,920 --> 00:06:44,790
and hit DOM Monster,

166
00:06:44,790 --> 00:06:46,380
and bam!

167
00:06:46,380 --> 00:06:48,480
We have this little console

168
00:06:48,480 --> 00:06:50,530
and it tells us

169
00:06:50,530 --> 00:06:52,350
basically some diagnostic information

170
00:06:52,350 --> 00:06:54,330
about the web page

171
00:06:54,330 --> 00:06:57,890
and it gives us some tips for improving front-end performance.

172
00:06:57,890 --> 00:06:59,510
So in this particular case

173
00:06:59,510 --> 00:07:01,520
for the DOM Monster page,

174
00:07:01,520 --> 00:07:04,070
it says, "Reduce the number of tags

175
00:07:04,070 --> 00:07:06,290
that use style attributes.

176
00:07:06,290 --> 00:07:10,020
There are 199 bytes of end line JavaScript code,"

177
00:07:10,020 --> 00:07:12,010
which is actually not much at all,

178
00:07:12,010 --> 00:07:16,060
but really pretty handy

179
00:07:16,060 --> 00:07:19,020
and it's super important to get front-end performance

180
00:07:19,020 --> 00:07:21,000
as fast as possible,

181
00:07:21,000 --> 00:07:24,040
especially in this age of mobile devices.

182
00:07:24,040 --> 00:07:25,700
>>Agreed.

183
00:07:25,700 --> 00:07:28,330
I like the icon, even though it scares me a little bit.

184
00:07:28,330 --> 00:07:31,430
>>It's just in time for Halloween.

185
00:07:31,430 --> 00:07:34,790
>>So next up we're going to be talking about Compass.app.

186
00:07:34,790 --> 00:07:37,440
In another episode, we talked about Compass,

187
00:07:37,440 --> 00:07:41,320
which was a little framework for generating and working with CSS.

188
00:07:41,320 --> 00:07:44,670
One of our members pointed out Compass.app,

189
00:07:44,670 --> 00:07:48,190
which is an app for working with Compass.

190
00:07:48,190 --> 00:07:51,010
And so what this will do is

191
00:07:51,010 --> 00:07:53,820
it will give you a little interface for working with Compass

192
00:07:53,820 --> 00:07:56,800
and then it will automatically update inside 

193
00:07:56,800 --> 00:07:59,050
of your browser

194
00:07:59,050 --> 00:08:02,510
and just kind of compile everything as it needs to be compiled.

195
00:08:02,510 --> 00:08:05,360
This is a $10 application,

196
00:08:05,360 --> 00:08:07,730
but 30% of the proceeds go to charity,

197
00:08:07,730 --> 00:08:09,290
so check that out at

198
00:08:09,290 --> 00:08:12,480
compass.handlino.com.

199
00:08:12,480 --> 00:08:14,340
>>And that is a pretty nifty feature,

200
00:08:14,340 --> 00:08:17,190
because often times when you're developing with tools

201
00:08:17,190 --> 00:08:19,270
like Compass or Sass,

202
00:08:19,270 --> 00:08:22,560
you'll have to go ahead and refresh the browser constantly.

203
00:08:22,560 --> 00:08:24,620
It's a bit back and forth,

204
00:08:24,620 --> 00:08:26,640
so it's pretty cool that you can see those results

205
00:08:26,640 --> 00:08:27,690
as they're developing.

206
00:08:27,690 --> 00:08:30,630
>>Definitely worth $10; not sponsoring the show,

207
00:08:30,630 --> 00:08:32,280
just to make that clear, yeah.

208
00:08:32,280 --> 00:08:35,850
>>Next up is this really cool font

209
00:08:35,850 --> 00:08:39,840
from Adobe called Source Code Pro

210
00:08:39,840 --> 00:08:42,010
and there's not a whole lot to say about this.

211
00:08:42,010 --> 00:08:44,320
There's a pretty nifty blog post 

212
00:08:44,320 --> 00:08:46,390
where they talk all about the advantages

213
00:08:46,390 --> 00:08:48,330
of using Source Code Pro

214
00:08:48,330 --> 00:08:51,540
over other fonts in any text setter,

215
00:08:51,540 --> 00:08:53,550
but it's just a new font 

216
00:08:53,550 --> 00:08:55,630
that is worth trying out.

217
00:08:55,630 --> 00:08:57,510
I think it looks pretty nice.

218
00:08:57,510 --> 00:08:59,060
It looks like it's a little bit more

219
00:08:59,060 --> 00:09:01,150
proportionally spaced

220
00:09:01,150 --> 00:09:03,860
but also monospaced at the same time,

221
00:09:03,860 --> 00:09:05,860
which is what you want for coding,

222
00:09:05,860 --> 00:09:07,000
so pretty cool, I like it.

223
00:09:07,000 --> 00:09:09,090
>>It's nice; I like their color scheme.

224
00:09:09,090 --> 00:09:10,410
>>Yeah.

225
00:09:10,410 --> 00:09:12,790
>>You know, your choice of source code font is a very personal choice,

226
00:09:12,790 --> 00:09:14,430
so try to this on; if it doesn't work out,

227
00:09:14,430 --> 00:09:15,560
you don't have to keep using it.

228
00:09:15,560 --> 00:09:17,270
>>It is a very personal choice,

229
00:09:17,270 --> 00:09:20,630
because it's going to be something that you're working with all of the time.

230
00:09:20,630 --> 00:09:22,440
>>Yeah.

231
00:09:22,440 --> 00:09:24,230
>>Alright, well I think that about wraps things up

232
00:09:24,230 --> 00:09:26,020
for this episode of The Treehouse Show.

233
00:09:26,020 --> 00:09:28,180
Jason, did we learn anything today?

234
00:09:28,180 --> 00:09:30,100
>>Not really.

235
00:09:30,100 --> 00:09:32,850
No, we learned that there's some pretty interesting tools for working with Compass

236
00:09:32,850 --> 00:09:34,130
and DOM Monster.

237
00:09:34,130 --> 00:09:35,960
That's pretty neat;

238
00:09:35,960 --> 00:09:37,290
other than that, I learned practically nothing.

239
00:09:37,290 --> 00:09:39,110
>>You learned my favorite flavor of ice cream.

240
00:09:39,110 --> 00:09:40,330
>>That's true; that is very important. 

241
00:09:40,330 --> 00:09:42,360
>>And you're thinking Cherry Garcia.

242
00:09:42,360 --> 00:09:43,570
>>Yes, yes I am.

243
00:09:43,570 --> 00:09:45,700
So thanks so much for watching

244
00:09:45,700 --> 00:09:47,810
this episode of The Treehouse Show.

245
00:09:47,810 --> 00:09:49,520
For show notes and more,

246
00:09:49,520 --> 00:09:51,340
check out our YouTube Channel at 

247
00:09:51,340 --> 00:09:53,230
youtube.com/gotreehouse

248
00:09:53,230 --> 00:09:55,960
>>And if you'd like to follow us on Twitter, I'm @NickRP

249
00:09:55,960 --> 00:09:57,050
>>And I'm @JSeifer

250
00:09:57,050 --> 00:10:00,860
>>And of course, if you'd like to watch more educational videos like this one,

251
00:10:00,860 --> 00:10:03,470
you can check us out at TeamTreeHouse.com.

252
00:10:03,470 --> 00:10:06,470
Thanks for watching!

253
00:10:06,470 --> 00:10:09,470
[??]