You've already started watching Episode 107: Reading jQuery, HTML 5 Captions, Flexbox
In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about the latest in web design, web development, HTML 5, front end development, and more.
-
0:00
I'm Nick Pettit.
-
0:01
>> I'm Jason Seifer.
-
0:02
>> And you're watching the Treehouse Show, your weekly dose of internets where we
-
0:05
talk about all things web design, web development and more.
-
0:08
[MUSIC] >> For
-
0:08
a free trial of Treehouse, head on over to teamtreehouse.com/show.
-
0:14
In this episode, we'll be talking about reading jQuery source code,
-
0:18
adding captions and subtitles to HTML5 video, Flexbox, and more.
-
0:23
>> Let's check it out.
-
0:24
[MUSIC]
-
0:29
>> First up over on the Quick Left blog,
-
0:32
we have a post called 18 Surprises I Had while reading jQuery's source code.
-
0:38
Now this goes through as you might expect from the title Surprises Encountered when
-
0:43
Reading though jQuery's source code.
-
0:45
>> I'm not surprised.
-
0:46
>> [LAUGH] The first one being that jQuery is written in JavaScript, that is not-
-
0:52
>> Still not surprised.
-
0:53
>> The actual first one.
-
0:55
So the author went, went on a quick tour through jQuery source code,
-
1:00
and found all of these surprising things.
-
1:03
Now you can through and read all about it.
-
1:05
I'm going to point out a few that I liked.
-
1:08
Number 3 is Bubbling caveats.
-
1:11
I like that one mainly because saying caveat is fun, and has nothing to do.
-
1:15
With what I actually wanted to talk about.
-
1:18
So function.addClass actually accepts a function.
-
1:23
That's interesting, you would expect that it takes a string which is does, but
-
1:28
you can also pass it a function.
-
1:31
Says here you must return a string of space separated class names,
-
1:34
from this function to apply them to the matched element.
-
1:38
And as a bonus, the function receives the matched element's index as
-
1:41
an argument which you can use to build intelligent class names.
-
1:45
How cool is that?
-
1:46
Number 9, document.ready uses a promise, that is actually really interesting,
-
1:51
and different behavior from previous versions of jQuery,
-
1:54
it now eats its own dog food by taking promises.
-
1:59
That's all we're gonna over from this article,
-
2:01
I recommend checking it out in the show notes.
-
2:04
>> Very nice stuff.
-
2:05
Well, next up is, Can I use.
-
2:08
We've talked about Can I use in the past, but Can I use just went through a.
-
2:12
A really nice redesign and it's much easier to navigate now, in my opinion.
-
2:17
Can I use, of course, is a website that shows you browser support for various CSS,
-
2:23
HTML5 and JavaScript elements, properties and.
-
2:29
What have you.
-
2:29
So, here you have a big listing of CSS.
-
2:33
You have HTML and, you can type in anything.
-
2:38
So I could type in say, maybe the Audio API, or
-
2:41
Audio element and, bam, it will tell me.
-
2:45
Which browsers have support for that particular thing.
-
2:49
If I scroll down here there's also a bunch of JavaScript APIs listed out.
-
2:54
A lot of them you may not have heard of yet,
-
2:56
because they don't have very good browser support.
-
2:59
Such as the Ambient Light API, or the Battery Status API.
-
3:04
Let's click on one of those, ew, looks like just Firefox supports it and
-
3:09
even there it just has partial support, so
-
3:12
that's probably why you haven't heard a whole lot about this just yet.
-
3:16
>> Guess we're not taking Chrome to any candle lit dinners.
-
3:19
>> Doesn't look that way.
-
3:21
But, anyway pretty cool, definitely be sure to check this out I use,
-
3:25
Can I use all the time.
-
3:28
And it's just enormously useful for checking on whether or
-
3:31
not, something I wanna use is supported in various browsers.
-
3:36
>> And it's because Chrome wouldn't appreciate it,
-
3:37
not because can't use the API.
-
3:41
Next up we have a post over on the Mozilla blog, on adding subtitles to HTML5 video.
-
3:49
Now this is actually a bit more complicated than you might expect.
-
3:54
But with video and Audio Elements in HTML5.
-
3:58
We can now add video and audio subtitles to Websites.
-
4:03
Now this is an example of using the video and Audio API.
-
4:08
Here's what it looks like on the site.
-
4:10
You can go ahead and click play, and then over on the right here,.
-
4:14
And it has the close captions.
-
4:16
And right now they're off but we can, on in English, and
-
4:21
then there's a couple other language options down here.
-
4:25
So, how do we accomplish all of this?
-
4:27
Well goes through and wow, look at all this that we have to do.
-
4:31
First step is adding the HTML Markup.
-
4:34
So we give it a video.
-
4:35
We give it the video source, that's all pretty standard and
-
4:38
then we add the different tracks, using the track element and
-
4:43
giving it the attributes most importantly,
-
4:46
the source being the destination of the caption, now also walks through and
-
4:52
tell you the different attributes that the track element has.
-
4:56
So once we have all that going well,
-
4:59
we have our video controls div and we have the button with the ID of captions,
-
5:05
and then we can see we're adding just a little bit of simple CSS to it.
-
5:09
So now it's time to implement the captioning.
-
5:13
So, the first thing that we have to do is, store a handle to the caption buttons.
-
5:18
And then we turn off all captions, and
-
5:21
this is in case any of the browsers turn the captions on by default.
-
5:26
This video player is going to not display, any captions at all.
-
5:30
After that we programatically build the caption menu based off of
-
5:34
the different tracks, that we implemented earlier in the HTML.
-
5:38
And then go through and create more buttons, and event listeners for
-
5:43
what happens when the track is clicked.
-
5:46
So, once again implement more CSS.
-
5:49
And then we can style it,
-
5:51
and now we have the wonderful browser compatibility section.
-
5:54
So this is a very thorough blog post telling you how to implement subtitles and
-
5:59
captions in HTML5 video, and
-
6:01
wow more than likely as Nick was saying earlier, you're probably going to
-
6:05
just want to use your video player that already has that all figured out for you.
-
6:09
>> Very nice stuff.
-
6:10
Well, next up is this wonderful blog post called
-
6:12
Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback.
-
6:18
>> What? >> Wooh, that's a lot of words.
-
6:20
What does it mean?
-
6:21
>> Does it?
-
6:21
>> Well, basically,.
-
6:24
In the app reader there is this,
-
6:27
a little problem that was present where all these boxes were not equal height.
-
6:33
But, instead of just leaving it broken like that,
-
6:37
it was solved using Flexbox to look like this.
-
6:43
Wooh, what? >> How did, how did that happen?
-
6:46
Well, Flexbox is this newer CSS property, or this group of CSS properties,
-
6:51
that basically, solves problems just like this one.
-
6:55
So, this is an unordered list, and each child, or
-
7:00
list item, has the class list item of two underscores, it's a little weird.
-
7:06
But okay.
-
7:06
And here, overflow hidden is being applied to the list,
-
7:11
just to clear all of the floated elements.
-
7:15
And then listed item is getting a width of 25%, and it's being floated to the left.
-
7:20
And that produces this result here.
-
7:22
With the Flexbox solution.
-
7:25
Each list has display flex applied to it, and then flex wrap is set to wrap,
-
7:33
and then each child has display flex applied to it as well.
-
7:38
And that gives it the same height in their rows.
-
7:42
So pretty clever use of Flexbox.
-
7:45
In fact, it's exactly how Flexbox was meant to
-
7:48
be used to solve problems just like that.
-
7:51
And also included here as a bonus is a JavaScript fallback for
-
7:55
browsers that don't support it.
-
7:57
So that's gonna be anything less than Internet Explorer 10.
-
8:01
Pretty cool stuff, so definitely be sure to check that out.
-
8:05
It could be useful for maybe like a photo gallery, or
-
8:08
really anything where you're displaying an unordered list, and
-
8:11
you would normally float everything to the left.
-
8:13
>> Yeah. >> To get them all in a row.
-
8:14
>> That's great. Flexxbox is the future today.
-
8:17
>> Mm-hm.
-
8:18
>> Next up we have a project called PLEASE.JS.
-
8:21
This is a JavaScript library that politely gives you a pleasing color.
-
8:26
Let's go ahead and see how that works.
-
8:28
It randomly makes a pleasing color.
-
8:30
Please.make_color.
-
8:32
Okay.
-
8:32
Let's go ahead and try it.
-
8:34
Click that button there.
-
8:35
That is very pleasing.
-
8:36
I'm going to try it again.
-
8:38
Oh, that's Pleasing as well.
-
8:40
Pink and blue.
-
8:41
I don't know what color that is.
-
8:44
And, I don't know what color that is, either.
-
8:46
I don't have the, the words for what these colors are.
-
8:49
Now instead of generating just one color, we could generate four.
-
8:53
Wow, look at that.
-
8:54
Got a nice little color palette going on here.
-
8:57
Or this could be lights on a disco dance floor.
-
9:01
>> I've got disco fever.
-
9:03
>> Yeah, who knows.
-
9:04
>> Well. >> So it also allows you
-
9:05
to make a random color based on another color, look at that.
-
9:09
Make a random gray.
-
9:10
Gray being a color and not some slang, I'm not familiar with.
-
9:13
>> Do they have a neon gray?
-
9:15
I don't think so.
-
9:16
>> Mm-hm.
-
9:17
>> It's really a soft outspoken gray.
-
9:21
>> Mm-hm. >> We are just going nuts.
-
9:22
Look at that. This is, this is nuts.
-
9:24
Anyway, the, the, that's cool.
-
9:26
PLEASE.JS generated pleasing random color.
-
9:30
>> Very cool stuff.
-
9:31
Well, I am @nickrp on Twitter.
-
9:33
>> And I am @jsefer. [MUSIC] For more information on anything we talked about,
-
9:35
check out our show notes at youtube.com/go treehouse.
-
9:37
You can also search for us on iTunes, we're the Treehouse Show.
-
9:40
And please, rate us.
-
9:42
>> And, if you'd like to see more videos like this one about web design,
-
9:45
web development, mobile business and so much more, be sure to check us out at
-
9:49
teamtreehouse.com/show for a free 30 day trial.
-
9:55
Thank you so much for watching, and we will see you next week.
-
9:57
[MUSIC]
You need to sign up for Treehouse in order to download course files.
Sign up