1
00:00:00,580 --> 00:00:01,470
I'm Nick Pettit.

2
00:00:01,470 --> 00:00:02,600
>> I'm Jason Seifer.

3
00:00:02,600 --> 00:00:05,683
>> And you're watching the Treehouse Show,
your weekly dose of internets where we

4
00:00:05,683 --> 00:00:08,056
talk about all things web design, web
development and more.

5
00:00:08,056 --> 00:00:08,586
[MUSIC]
>> For

6
00:00:08,586 --> 00:00:14,040
a free trial of Treehouse, head on over to
teamtreehouse.com/show.

7
00:00:14,040 --> 00:00:18,340
In this episode, we'll be talking about
reading jQuery source code,

8
00:00:18,340 --> 00:00:23,760
adding captions and subtitles to HTML5
video, Flexbox, and more.

9
00:00:23,760 --> 00:00:24,659
>> Let's check it out.

10
00:00:24,659 --> 00:00:29,607
[MUSIC]

11
00:00:29,607 --> 00:00:32,279
>> First up over on the Quick Left blog,

12
00:00:32,279 --> 00:00:38,810
we have a post called 18 Surprises I Had
while reading jQuery's source code.

13
00:00:38,810 --> 00:00:43,530
Now this goes through as you might expect
from the title Surprises Encountered when

14
00:00:43,530 --> 00:00:45,410
Reading though jQuery's source code.

15
00:00:45,410 --> 00:00:46,485
>> I'm not surprised.

16
00:00:46,485 --> 00:00:52,060
>> [LAUGH] The first one being that jQuery
is written in JavaScript, that is not-

17
00:00:52,060 --> 00:00:53,180
>> Still not surprised.

18
00:00:53,180 --> 00:00:55,520
>> The actual first one.

19
00:00:55,520 --> 00:01:00,440
So the author went, went on a quick tour
through jQuery source code,

20
00:01:00,440 --> 00:01:03,410
and found all of these surprising things.

21
00:01:03,410 --> 00:01:05,810
Now you can through and read all about it.

22
00:01:05,810 --> 00:01:08,830
I'm going to point out a few that I liked.

23
00:01:08,830 --> 00:01:11,340
Number 3 is Bubbling caveats.

24
00:01:11,340 --> 00:01:15,770
I like that one mainly because saying
caveat is fun, and has nothing to do.

25
00:01:15,770 --> 00:01:18,260
With what I actually wanted to talk about.

26
00:01:18,260 --> 00:01:23,400
So function.addClass actually accepts a
function.

27
00:01:23,400 --> 00:01:28,300
That's interesting, you would expect that
it takes a string which is does, but

28
00:01:28,300 --> 00:01:31,590
you can also pass it a function.

29
00:01:31,590 --> 00:01:34,730
Says here you must return a string of
space separated class names,

30
00:01:34,730 --> 00:01:38,400
from this function to apply them to the
matched element.

31
00:01:38,400 --> 00:01:41,620
And as a bonus, the function receives the
matched element's index as

32
00:01:41,620 --> 00:01:45,010
an argument which you can use to build
intelligent class names.

33
00:01:45,010 --> 00:01:46,326
How cool is that?

34
00:01:46,326 --> 00:01:51,680
Number 9, document.ready uses a promise,
that is actually really interesting,

35
00:01:51,680 --> 00:01:54,720
and different behavior from previous
versions of jQuery,

36
00:01:54,720 --> 00:01:59,090
it now eats its own dog food by taking
promises.

37
00:01:59,090 --> 00:02:01,360
That's all we're gonna over from this
article,

38
00:02:01,360 --> 00:02:04,170
I recommend checking it out in the show
notes.

39
00:02:04,170 --> 00:02:05,610
>> Very nice stuff.

40
00:02:05,610 --> 00:02:08,270
Well, next up is, Can I use.

41
00:02:08,270 --> 00:02:12,050
We've talked about Can I use in the past,
but Can I use just went through a.

42
00:02:12,050 --> 00:02:16,600
A really nice redesign and it's much
easier to navigate now, in my opinion.

43
00:02:17,640 --> 00:02:23,918
Can I use, of course, is a website that
shows you browser support for various CSS,

44
00:02:23,918 --> 00:02:29,050
HTML5 and JavaScript elements, properties
and.

45
00:02:29,050 --> 00:02:29,900
What have you.

46
00:02:29,900 --> 00:02:33,120
So, here you have a big listing of CSS.

47
00:02:33,120 --> 00:02:38,080
You have HTML and, you can type in
anything.

48
00:02:38,080 --> 00:02:41,970
So I could type in say, maybe the Audio
API, or

49
00:02:41,970 --> 00:02:45,320
Audio element and, bam, it will tell me.

50
00:02:45,320 --> 00:02:49,950
Which browsers have support for that
particular thing.

51
00:02:49,950 --> 00:02:54,600
If I scroll down here there's also a bunch
of JavaScript APIs listed out.

52
00:02:54,600 --> 00:02:56,860
A lot of them you may not have heard of
yet,

53
00:02:56,860 --> 00:02:59,340
because they don't have very good browser
support.

54
00:02:59,340 --> 00:03:04,430
Such as the Ambient Light API, or the
Battery Status API.

55
00:03:04,430 --> 00:03:09,320
Let's click on one of those, ew, looks
like just Firefox supports it and

56
00:03:09,320 --> 00:03:12,390
even there it just has partial support, so

57
00:03:12,390 --> 00:03:16,610
that's probably why you haven't heard a
whole lot about this just yet.

58
00:03:16,610 --> 00:03:19,720
>> Guess we're not taking Chrome to any
candle lit dinners.

59
00:03:19,720 --> 00:03:21,390
>> Doesn't look that way.

60
00:03:21,390 --> 00:03:25,900
But, anyway pretty cool, definitely be
sure to check this out I use,

61
00:03:25,900 --> 00:03:28,110
Can I use all the time.

62
00:03:28,110 --> 00:03:31,300
And it's just enormously useful for
checking on whether or

63
00:03:31,300 --> 00:03:36,190
not, something I wanna use is supported in
various browsers.

64
00:03:36,190 --> 00:03:37,920
>> And it's because Chrome wouldn't
appreciate it,

65
00:03:37,920 --> 00:03:40,280
not because can't use the API.

66
00:03:41,660 --> 00:03:49,170
Next up we have a post over on the Mozilla
blog, on adding subtitles to HTML5 video.

67
00:03:49,170 --> 00:03:54,070
Now this is actually a bit more
complicated than you might expect.

68
00:03:54,070 --> 00:03:58,180
But with video and Audio Elements in
HTML5.

69
00:03:58,180 --> 00:04:03,330
We can now add video and audio subtitles
to Websites.

70
00:04:03,330 --> 00:04:08,890
Now this is an example of using the video
and Audio API.

71
00:04:08,890 --> 00:04:10,400
Here's what it looks like on the site.

72
00:04:10,400 --> 00:04:14,690
You can go ahead and click play, and then
over on the right here,.

73
00:04:14,690 --> 00:04:16,660
And it has the close captions.

74
00:04:16,660 --> 00:04:21,060
And right now they're off but we can, on
in English, and

75
00:04:21,060 --> 00:04:24,260
then there's a couple other language
options down here.

76
00:04:25,390 --> 00:04:27,900
So, how do we accomplish all of this?

77
00:04:27,900 --> 00:04:31,780
Well goes through and wow, look at all
this that we have to do.

78
00:04:31,780 --> 00:04:34,420
First step is adding the HTML Markup.

79
00:04:34,420 --> 00:04:35,850
So we give it a video.

80
00:04:35,850 --> 00:04:38,580
We give it the video source, that's all
pretty standard and

81
00:04:38,580 --> 00:04:43,020
then we add the different tracks, using
the track element and

82
00:04:43,020 --> 00:04:46,420
giving it the attributes most importantly,

83
00:04:46,420 --> 00:04:52,350
the source being the destination of the
caption, now also walks through and

84
00:04:52,350 --> 00:04:56,610
tell you the different attributes that the
track element has.

85
00:04:56,610 --> 00:04:59,130
So once we have all that going well,

86
00:04:59,130 --> 00:05:05,030
we have our video controls div and we have
the button with the ID of captions,

87
00:05:05,030 --> 00:05:09,700
and then we can see we're adding just a
little bit of simple CSS to it.

88
00:05:09,700 --> 00:05:13,040
So now it's time to implement the
captioning.

89
00:05:13,040 --> 00:05:18,990
So, the first thing that we have to do is,
store a handle to the caption buttons.

90
00:05:18,990 --> 00:05:21,200
And then we turn off all captions, and

91
00:05:21,200 --> 00:05:26,620
this is in case any of the browsers turn
the captions on by default.

92
00:05:26,620 --> 00:05:30,750
This video player is going to not display,
any captions at all.

93
00:05:30,750 --> 00:05:34,560
After that we programatically build the
caption menu based off of

94
00:05:34,560 --> 00:05:38,880
the different tracks, that we implemented
earlier in the HTML.

95
00:05:38,880 --> 00:05:43,170
And then go through and create more
buttons, and event listeners for

96
00:05:43,170 --> 00:05:46,810
what happens when the track is clicked.

97
00:05:46,810 --> 00:05:49,450
So, once again implement more CSS.

98
00:05:49,450 --> 00:05:51,200
And then we can style it,

99
00:05:51,200 --> 00:05:54,940
and now we have the wonderful browser
compatibility section.

100
00:05:54,940 --> 00:05:59,490
So this is a very thorough blog post
telling you how to implement subtitles and

101
00:05:59,490 --> 00:06:01,810
captions in HTML5 video, and

102
00:06:01,810 --> 00:06:05,360
wow more than likely as Nick was saying
earlier, you're probably going to

103
00:06:05,360 --> 00:06:09,530
just want to use your video player that
already has that all figured out for you.

104
00:06:09,530 --> 00:06:10,270
>> Very nice stuff.

105
00:06:10,270 --> 00:06:12,810
Well, next up is this wonderful blog post
called

106
00:06:12,810 --> 00:06:18,570
Flexbox Based Responsive Equal Height
Blocks With JavaScript Fallback.

107
00:06:18,570 --> 00:06:20,280
>> What?
>> Wooh, that's a lot of words.

108
00:06:20,280 --> 00:06:21,090
What does it mean?

109
00:06:21,090 --> 00:06:21,700
>> Does it?

110
00:06:21,700 --> 00:06:23,150
>> Well, basically,.

111
00:06:24,280 --> 00:06:27,900
In the app reader there is this,

112
00:06:27,900 --> 00:06:33,810
a little problem that was present where
all these boxes were not equal height.

113
00:06:33,810 --> 00:06:37,960
But, instead of just leaving it broken
like that,

114
00:06:37,960 --> 00:06:43,550
it was solved using Flexbox to look like
this.

115
00:06:43,550 --> 00:06:46,220
Wooh, what?
>> How did, how did that happen?

116
00:06:46,220 --> 00:06:51,710
Well, Flexbox is this newer CSS property,
or this group of CSS properties,

117
00:06:51,710 --> 00:06:55,470
that basically, solves problems just like
this one.

118
00:06:55,470 --> 00:07:00,670
So, this is an unordered list, and each
child, or

119
00:07:00,670 --> 00:07:06,040
list item, has the class list item of two
underscores, it's a little weird.

120
00:07:06,040 --> 00:07:06,596
But okay.

121
00:07:06,596 --> 00:07:11,580
And here, overflow hidden is being applied
to the list,

122
00:07:11,580 --> 00:07:15,220
just to clear all of the floated elements.

123
00:07:15,220 --> 00:07:20,340
And then listed item is getting a width of
25%, and it's being floated to the left.

124
00:07:20,340 --> 00:07:22,600
And that produces this result here.

125
00:07:22,600 --> 00:07:25,220
With the Flexbox solution.

126
00:07:25,220 --> 00:07:33,080
Each list has display flex applied to it,
and then flex wrap is set to wrap,

127
00:07:33,080 --> 00:07:38,500
and then each child has display flex
applied to it as well.

128
00:07:38,500 --> 00:07:42,520
And that gives it the same height in their
rows.

129
00:07:42,520 --> 00:07:45,280
So pretty clever use of Flexbox.

130
00:07:45,280 --> 00:07:48,190
In fact, it's exactly how Flexbox was
meant to

131
00:07:48,190 --> 00:07:51,190
be used to solve problems just like that.

132
00:07:51,190 --> 00:07:55,860
And also included here as a bonus is a
JavaScript fallback for

133
00:07:55,860 --> 00:07:57,340
browsers that don't support it.

134
00:07:57,340 --> 00:08:01,840
So that's gonna be anything less than
Internet Explorer 10.

135
00:08:01,840 --> 00:08:05,540
Pretty cool stuff, so definitely be sure
to check that out.

136
00:08:05,540 --> 00:08:08,860
It could be useful for maybe like a photo
gallery, or

137
00:08:08,860 --> 00:08:11,650
really anything where you're displaying an
unordered list, and

138
00:08:11,650 --> 00:08:13,830
you would normally float everything to the
left.

139
00:08:13,830 --> 00:08:14,930
>> Yeah.
>> To get them all in a row.

140
00:08:14,930 --> 00:08:17,095
>> That's great.
Flexxbox is the future today.

141
00:08:17,095 --> 00:08:18,320
>> Mm-hm.

142
00:08:18,320 --> 00:08:21,340
>> Next up we have a project called
PLEASE.JS.

143
00:08:21,340 --> 00:08:26,950
This is a JavaScript library that politely
gives you a pleasing color.

144
00:08:26,950 --> 00:08:28,380
Let's go ahead and see how that works.

145
00:08:28,380 --> 00:08:30,725
It randomly makes a pleasing color.

146
00:08:30,725 --> 00:08:32,300
Please.make_color.

147
00:08:32,300 --> 00:08:32,860
Okay.

148
00:08:32,860 --> 00:08:34,750
Let's go ahead and try it.

149
00:08:34,750 --> 00:08:35,790
Click that button there.

150
00:08:35,790 --> 00:08:36,980
That is very pleasing.

151
00:08:36,980 --> 00:08:38,350
I'm going to try it again.

152
00:08:38,350 --> 00:08:40,310
Oh, that's Pleasing as well.

153
00:08:40,310 --> 00:08:41,480
Pink and blue.

154
00:08:41,480 --> 00:08:43,470
I don't know what color that is.

155
00:08:44,860 --> 00:08:46,380
And, I don't know what color that is,
either.

156
00:08:46,380 --> 00:08:49,740
I don't have the, the words for what these
colors are.

157
00:08:49,740 --> 00:08:53,240
Now instead of generating just one color,
we could generate four.

158
00:08:53,240 --> 00:08:54,140
Wow, look at that.

159
00:08:54,140 --> 00:08:56,290
Got a nice little color palette going on
here.

160
00:08:57,350 --> 00:09:01,490
Or this could be lights on a disco dance
floor.

161
00:09:01,490 --> 00:09:03,050
>> I've got disco fever.

162
00:09:03,050 --> 00:09:04,650
>> Yeah, who knows.

163
00:09:04,650 --> 00:09:05,740
>> Well.
>> So it also allows you

164
00:09:05,740 --> 00:09:09,290
to make a random color based on another
color, look at that.

165
00:09:09,290 --> 00:09:10,730
Make a random gray.

166
00:09:10,730 --> 00:09:13,910
Gray being a color and not some slang, I'm
not familiar with.

167
00:09:13,910 --> 00:09:15,790
>> Do they have a neon gray?

168
00:09:15,790 --> 00:09:16,680
I don't think so.

169
00:09:16,680 --> 00:09:17,970
>> Mm-hm.

170
00:09:17,970 --> 00:09:21,350
>> It's really a soft outspoken gray.

171
00:09:21,350 --> 00:09:22,850
>> Mm-hm.
>> We are just going nuts.

172
00:09:22,850 --> 00:09:24,570
Look at that.
This is, this is nuts.

173
00:09:24,570 --> 00:09:26,610
Anyway, the, the, that's cool.

174
00:09:26,610 --> 00:09:30,230
PLEASE.JS generated pleasing random color.

175
00:09:30,230 --> 00:09:31,150
>> Very cool stuff.

176
00:09:31,150 --> 00:09:33,000
Well, I am @nickrp on Twitter.

177
00:09:33,000 --> 00:09:35,568
>> And I am @jsefer. [MUSIC] For more
information on anything we talked about,

178
00:09:35,568 --> 00:09:37,990
check out our show notes at youtube.com/go
treehouse.

179
00:09:37,990 --> 00:09:40,890
You can also search for us on iTunes,
we're the Treehouse Show.

180
00:09:40,890 --> 00:09:42,280
And please, rate us.

181
00:09:42,280 --> 00:09:45,540
>> And, if you'd like to see more videos
like this one about web design,

182
00:09:45,540 --> 00:09:49,855
web development, mobile business and so
much more, be sure to check us out at

183
00:09:49,855 --> 00:09:55,350
teamtreehouse.com/show for a free 30 day
trial.

184
00:09:55,350 --> 00:09:57,827
Thank you so much for watching, and we
will see you next week.

185
00:09:57,827 --> 00:10:04,539
[MUSIC]