I'm Nick Pettit.

>> I'm Jason Seifer.

>> And you're watching the Treehouse Show, your weekly dose of internets where we

talk about all things web design, web development and more.

[MUSIC] >> For

a free trial of Treehouse, head on over to teamtreehouse.com/show.

In this episode, we'll be talking about reading jQuery source code,

adding captions and subtitles to HTML5 video, Flexbox, and more.

>> Let's check it out.

[MUSIC]

>> First up over on the Quick Left blog,

we have a post called 18 Surprises I Had while reading jQuery's source code.

Now this goes through as you might expect from the title Surprises Encountered when

Reading though jQuery's source code.

>> I'm not surprised.

>> [LAUGH] The first one being that jQuery is written in JavaScript, that is not-

>> Still not surprised.

>> The actual first one.

So the author went, went on a quick tour through jQuery source code,

and found all of these surprising things.

Now you can through and read all about it.

I'm going to point out a few that I liked.

Number 3 is Bubbling caveats.

I like that one mainly because saying caveat is fun, and has nothing to do.

With what I actually wanted to talk about.

So function.addClass actually accepts a function.

That's interesting, you would expect that it takes a string which is does, but

you can also pass it a function.

Says here you must return a string of space separated class names,

from this function to apply them to the matched element.

And as a bonus, the function receives the matched element's index as

an argument which you can use to build intelligent class names.

How cool is that?

Number 9, document.ready uses a promise, that is actually really interesting,

and different behavior from previous versions of jQuery,

it now eats its own dog food by taking promises.

That's all we're gonna over from this article,

I recommend checking it out in the show notes.

>> Very nice stuff.

Well, next up is, Can I use.

We've talked about Can I use in the past, but Can I use just went through a.

A really nice redesign and it's much easier to navigate now, in my opinion.

Can I use, of course, is a website that shows you browser support for various CSS,

HTML5 and JavaScript elements, properties and.

What have you.

So, here you have a big listing of CSS.

You have HTML and, you can type in anything.

So I could type in say, maybe the Audio API, or

Audio element and, bam, it will tell me.

Which browsers have support for that particular thing.

If I scroll down here there's also a bunch of JavaScript APIs listed out.

A lot of them you may not have heard of yet,

because they don't have very good browser support.

Such as the Ambient Light API, or the Battery Status API.

Let's click on one of those, ew, looks like just Firefox supports it and

even there it just has partial support, so

that's probably why you haven't heard a whole lot about this just yet.

>> Guess we're not taking Chrome to any candle lit dinners.

>> Doesn't look that way.

But, anyway pretty cool, definitely be sure to check this out I use,

Can I use all the time.

And it's just enormously useful for checking on whether or

not, something I wanna use is supported in various browsers.

>> And it's because Chrome wouldn't appreciate it,

not because can't use the API.

Next up we have a post over on the Mozilla blog, on adding subtitles to HTML5 video.

Now this is actually a bit more complicated than you might expect.

But with video and Audio Elements in HTML5.

We can now add video and audio subtitles to Websites.

Now this is an example of using the video and Audio API.

Here's what it looks like on the site.

You can go ahead and click play, and then over on the right here,.

And it has the close captions.

And right now they're off but we can, on in English, and

then there's a couple other language options down here.

So, how do we accomplish all of this?

Well goes through and wow, look at all this that we have to do.

First step is adding the HTML Markup.

So we give it a video.

We give it the video source, that's all pretty standard and

then we add the different tracks, using the track element and

giving it the attributes most importantly,

the source being the destination of the caption, now also walks through and

tell you the different attributes that the track element has.

So once we have all that going well,

we have our video controls div and we have the button with the ID of captions,

and then we can see we're adding just a little bit of simple CSS to it.

So now it's time to implement the captioning.

So, the first thing that we have to do is, store a handle to the caption buttons.

And then we turn off all captions, and

this is in case any of the browsers turn the captions on by default.

This video player is going to not display, any captions at all.

After that we programatically build the caption menu based off of

the different tracks, that we implemented earlier in the HTML.

And then go through and create more buttons, and event listeners for

what happens when the track is clicked.

So, once again implement more CSS.

And then we can style it,

and now we have the wonderful browser compatibility section.

So this is a very thorough blog post telling you how to implement subtitles and

captions in HTML5 video, and

wow more than likely as Nick was saying earlier, you're probably going to

just want to use your video player that already has that all figured out for you.

>> Very nice stuff.

Well, next up is this wonderful blog post called

Flexbox Based Responsive Equal Height Blocks With JavaScript Fallback.

>> What? >> Wooh, that's a lot of words.

What does it mean?

>> Does it?

>> Well, basically,.

In the app reader there is this,

a little problem that was present where all these boxes were not equal height.

But, instead of just leaving it broken like that,

it was solved using Flexbox to look like this.

Wooh, what? >> How did, how did that happen?

Well, Flexbox is this newer CSS property, or this group of CSS properties,

that basically, solves problems just like this one.

So, this is an unordered list, and each child, or

list item, has the class list item of two underscores, it's a little weird.

But okay.

And here, overflow hidden is being applied to the list,

just to clear all of the floated elements.

And then listed item is getting a width of 25%, and it's being floated to the left.

And that produces this result here.

With the Flexbox solution.

Each list has display flex applied to it, and then flex wrap is set to wrap,

and then each child has display flex applied to it as well.

And that gives it the same height in their rows.

So pretty clever use of Flexbox.

In fact, it's exactly how Flexbox was meant to

be used to solve problems just like that.

And also included here as a bonus is a JavaScript fallback for

browsers that don't support it.

So that's gonna be anything less than Internet Explorer 10.

Pretty cool stuff, so definitely be sure to check that out.

It could be useful for maybe like a photo gallery, or

really anything where you're displaying an unordered list, and

you would normally float everything to the left.

>> Yeah. >> To get them all in a row.

>> That's great. Flexxbox is the future today.

>> Mm-hm.

>> Next up we have a project called PLEASE.JS.

This is a JavaScript library that politely gives you a pleasing color.

Let's go ahead and see how that works.

It randomly makes a pleasing color.

Please.make_color.

Okay.

Let's go ahead and try it.

Click that button there.

That is very pleasing.

I'm going to try it again.

Oh, that's Pleasing as well.

Pink and blue.

I don't know what color that is.

And, I don't know what color that is, either.

I don't have the, the words for what these colors are.

Now instead of generating just one color, we could generate four.

Wow, look at that.

Got a nice little color palette going on here.

Or this could be lights on a disco dance floor.

>> I've got disco fever.

>> Yeah, who knows.

>> Well. >> So it also allows you

to make a random color based on another color, look at that.

Make a random gray.

Gray being a color and not some slang, I'm not familiar with.

>> Do they have a neon gray?

I don't think so.

>> Mm-hm.

>> It's really a soft outspoken gray.

>> Mm-hm. >> We are just going nuts.

Look at that. This is, this is nuts.

Anyway, the, the, that's cool.

PLEASE.JS generated pleasing random color.

>> Very cool stuff.

Well, I am @nickrp on Twitter.

>> And I am @jsefer. [MUSIC] For more information on anything we talked about,

check out our show notes at youtube.com/go treehouse.

You can also search for us on iTunes, we're the Treehouse Show.

And please, rate us.

>> And, if you'd like to see more videos like this one about web design,

web development, mobile business and so much more, be sure to check us out at

teamtreehouse.com/show for a free 30 day trial.

Thank you so much for watching, and we will see you next week.

[MUSIC]