Episode 107: Reading jQuery, HTML 5 Captions, Flexbox

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