Episode 39: HTML Video and the Web as a Gaming Platform

[SOUND] >> I'm Nick Pettit. 0:00 >> I'm Jason Seifer. 0:02 >> And you're watching the Treehouse Show. 0:03 Your weekly dose of internet where we talk 0:04 about all things web design, web development and more. 0:06 >> In this episode we'll be talking about cross browser 0:09 HTML5 video, The Web as a Gaming Platform jQuery2.0 and more. 0:12 >> Let's check it out. 0:18 [MUSIC] 0:20 >> First up, over on the Cats Who Code blog, which is basically the Internet and 0:26 coding combined, there is a blog post on 0:31 cross browser HTML5 video and how you implement it. 0:33 Now, it's actually not as hard as you might 0:37 expect to implement cross prow, cross browser HTML5 video. 0:39 So let's take a little look at how we do it. 0:43 Step one, is prepare the files. 0:46 This makes a lot of sense if you're gonna be serving videos. 0:48 Well, you need to have them in formats that all the different browsers can read. 0:51 So, there is an online conversion site that you can use. 0:55 You upload your video, and then you 0:59 can download it in the different formats required. 1:00 Next up, it's actually really easy to use to create a video tag. 1:03 That's all it is. 1:08 Just use a video tag and then list 1:09 the different sources that the converted files come in. 1:11 So you upload them to 1:15 the site, give it the different path and you're ready to go. 1:16 Finally, you need to tell your web server how to process those different files 1:19 so that you add the different types using the ht access files in Apache. 1:25 Engine X will have slightly different syntax. 1:29 Finally you can use an object tag to create 1:32 a fallback for older browsers, and that is it. 1:34 That is all you have to do to serve HTML5 video. 1:38 Nick, could that be any easier? >> I don't think so. 1:42 >> I don't think so either. 1:44 >> I, unless you could just push a button and it happens. 1:45 Automatically. 1:49 >> I didn't think [CROSSTALK] about that but that's a very good point. 1:50 >> Slightly easier. >> Yeah. 1:51 >> Next up is this amazing post over on the Mozilla blog. 1:54 And I'm gonna preface this by saying this 1:58 is very advanced and even I barely understand it. 2:00 But we're gonna take a look at it anyway. 2:03 Basically 2:06 Mozilla is, has teamed up with Epic games and they have ported the 2:07 Unreal engine three to the web using this highly optimized 2:13 version of Javascript that's that's inside of their web browser. 2:18 So they you know, just did something that's completely amazing here. 2:24 It uses Javascript, HTML, 2:29 and web GL. 2:32 And if you go ahead and watch the videos, it, I mean, it just has absolutely amazing 2:34 frame rates right in the browser and I'm 2:39 just completely shocked at that this is even possible. 2:42 That we're like at this point where we can start considering developing 2:45 games, and high performance 3D games at that, inside of the browser. 2:49 >> Yeah it, it's pretty amazing. The the project they use is called asm.js 2:54 which is a smaller subset of JavaScript and 2:59 that's what let's them optimize it so much. 3:02 That's integrated into newer versions of Firefox nightlies. 3:04 >> Look at that, this guy, adding some clarity. 3:08 >> Pretty amazing stuff. >> Yup. 3:10 Very, very, very cool and I think you know, 3:12 I think this is kind of like the next, 3:16 next horizon, in my opinion, but, I, I think 3:17 were gonna start seeing some really amazing games developed inside 3:21 of the browser so. >> I hope so. 3:24 >> I don't know what that's going to mean for 3:26 web developers or for the gaming industry but it's certainly exciting. 3:28 >> It means you have to know how to code games on the web. 3:32 >> That's right. 3:35 >> Next up big news. 3:36 jQuery 2.0 has been released. 3:37 Big news because pretty much everybody uses jQuery these days. 3:41 >> And this is version 2.0. 3:44 >> Yeah. 3:46 >> I mean, jQuery has been around for quite some time. 3:46 So Having 3:49 a 2.0 released, >> Monumental. 3:50 >> Pretty crazy. 3:52 >> Yeah, so one of the big things about 3:53 jQuery 2.0 is that it drops support for older browsers. 3:55 IE 6, 7 and 8 will not work with jQuery 2.0. 4:00 If you do need to use IE 6, 7, and 8, you can still 4:03 use jQuery 1.9 they say not to worry because they're going to be supporting it. 4:07 Now the big benefit that you're gonna get with jQuery 4:13 2.0 is that since those older browsers don't need to be supported, all the code 4:16 that dealt with the workarounds for them has been able to be dropped from jQuery. 4:21 Now some of that code was causing problems on it's own, 4:25 so what you get is just speedier sites on newer browsers. 4:27 And by newer we mean IE nine and up and almost any 4:31 version of Firefox, Chrome, Safari, whatever will be supported in jQuery 2.0. 4:35 Anyway, go ahead and download that. 4:41 Use it on your site, install it, good to go. 4:43 We'll link to a change log in the 4:45 show notes that you can get to at youtube.com/gotreehouse. 4:46 Or in our iTunes feed. 4:50 >> I'm pretty shocked that they're actually 4:52 dropping support for IE 6, 7, and 8. 4:54 I guess I'm less shocked about 6 and 7, 4:57 but 8 is you know, still pretty widely used. 5:00 >> It. >> So, it, it's interesting 5:04 because jQuery is used just almost everywhere on the web, and so they have a 5:06 lot of sway in terms of what browsers should be used by used by people. 5:10 So. 5:17 >> Yeah, well they do. 5:17 And, that's why they give you the option of staying 5:18 on 1.9, if you do need to support those older browsers. 5:21 Which, unfortunately some of us still do. 5:24 >> That's right, so, pretty, pretty amazing 5:28 >> Now, when I say support, I mean be able to use 5:31 it on your site, not like, console it during times of need. 5:33 >> Mm. 5:35 Like, like I do for you. 5:36 >> Yeah. >> Occasionally. 5:38 Next up, related is not related to me consoling Jason, related to jQuery. 5:40 >> Thank you for that. 5:45 >> Is, is, is, is jQuery, jQuery Builder. 5:46 JQuery Builder lets you easily build a custom version of jQuery. 5:51 And so just like we're discussing. 5:56 You can go ahead and select Version 2.0, which 5:58 includes a lot more modules, or you can go ahead 6:02 and drop it back down to, 1.9, if you 6:05 do need to go ahead and support Internet Explorer 8. 6:09 And then you bas, then you just check off the modules 6:12 that you wanna go ahead and include and it will give you 6:16 a button where you can go ahead and build that, download it or you can do it from 6:21 the command line and get it from GitHub and they even offer a 6:26 node.js command line interface tool so you can go ahead and install it that way. 6:31 So pretty cool stuff, I mean it's there's not a whole lot of stuff to say 6:38 about it, but it's you know, a nifty way to go ahead and just build a custom 6:41 version of jQuery that could go ahead and save you a little bit of file space. 6:46 >> Hot on the heels of that is a blog post about shame.css, very appropriate. 6:51 >> [LAUGH] 6:57 >> This is a blog post by Harry Roberts 6:58 who talks about design patterns when working with css. 7:01 Now if you do need to support older browsers, at 7:05 some point you'll have to use some hacks in your CSS 7:08 to get things to display correctly. 7:12 >> Now you want to try to avoid hacks, of course, in your CSS, but. 7:14 >> Things happen. >> Yeah. 7:18 I mean, in practical use cases, yeah, there, there are 7:20 situations where you do have hacks that you have to use. 7:24 >> Right. 7:27 You know, maybe you don't have to have time to 7:28 optimize something, and you gotta get the site out yesterday. 7:29 Anyway what Harry is saying is put this all in a file called shame.css, and 7:32 then comment about why you're using these hacks. 7:39 And then later when you have time to refactor 7:43 you can go through and change up your css file. 7:45 Take it out of shame.css, or whatever. 7:48 Now, what he's saying to do, what's a really important part of this is you don't 7:51 want this file, like, just as a file out on your web server called shame.css. 7:56 You should be using a css preprocessor to concatenate and 8:01 minify your css files. 8:05 So put it in there and then let the preprocessor deal with it. 8:07 And if you're not using a preprocessor maybe use some 8:11 sort of build script beforehand to get that all going. 8:15 >> Or you could just rename it, you know? 8:18 >> That's a good point. 8:20 >> Yep. >> These are not hacks.css. 8:21 >> That's right. 8:23 Next up is this amazing tool called UI Faces, and it's basically like 8:25 lorem ipsum text but for avatars. >> Nice. 8:30 >> So let's say that you're building a new interface and 8:34 you need to go ahead and put some profile pictures in there. 8:37 Eh, you know. 8:41 This is just a quick way to get some, some photos that are representative of what 8:42 normal people use as profile pictures. >> Like that Batman avatar. 8:48 >> That's right. And you can go ahead and drop them into 8:52 your prototype. 8:55 You can, of course, adjust the size of 8:56 these avatars, just with this little slider right here. 8:59 You can adjust the spacing between them, and you can even adjust the border radii. 9:02 And let's say, will it go? 9:08 Yeah, look at that. 9:10 You can even adjust the border radii to 9:11 the point where the avatars are just a circle. 9:13 So that's, pretty cool there. 9:17 again, similar to jQuery builder, there's not a whole lot to 9:21 say about this, but it's still really nifty if you're prototyping 9:25 an app and you just wanna get some avatars in there 9:29 and you just, you know, wanna go for it so, pretty cool. 9:31 >> Really nice. 9:34 >> Yeah. 9:35 >> Next up we have a link to an online book called Single page Apps In Depth. 9:36 If you're using a single page application framework like backbone, spine,js, 9:41 or many of the others that we've talked about here on the Treehouse Show 9:47 before, you could go back and watch 9:51 every other episode for more information on that. 9:53 Anyway so this book walks through everything that you're 9:56 gonna need to know when coding a single page application. 9:59 Now, obviously we're not gonna be able to go through everything on here, 10:02 but it goes through everything from 10:06 writing maintainable code, looking at the implementation. 10:07 How to use different views and templating, you know binding the data 10:12 from HTML to the DOM and the models on the back end. 10:16 So there's just a ton of different nuances to building single page 10:21 applications, and this book does a really good job of going through them. 10:25 You can find a link to that in the show notes in our 10:30 iTunes feed at the Treehouse Show 10:33 or on our Youtube channel at youtube.com/gotreehouse. 10:36 Next up is this really cool post from 10:39 Codrops where they built these responsive, multi-level menus. 10:42 >> Ooh. 10:48 >> That is quite the tongue twister. 10:49 So let's go ahead and look at the demo 10:52 here, I'm gonna go ahead and click on this. 10:54 Very common three line menu design pattern 10:58 we've talked about that on the show before. 11:02 So, 11:04 go ahead and click on that and it brings up you know, this pretty normal looking 11:04 menu as you'd expect however when I click into this menu whoa, look at that. 11:09 >> Whoa. 11:16 Are we in the future? >> It's looking that way, Jason. 11:16 Basically, you click on this and it will slide the next level of the menu over. 11:20 They have a couple of different demos here. 11:25 So let's go ahead and see what this one does. 11:27 Very cool stuff. 11:32 Basically, each demo is just a different style of, of animation. 11:33 But it's a nice way to do menus because 11:39 a lot of times when you have multilevel menus like 11:43 this, you're sort of, moving your mouse and like, you 11:45 want to like, make sure the menu doesn't go away. 11:49 So you go to the next. >> Right. 11:52 >> One, and you have to like, make sure that you're hovered 11:54 over in the right area, and that you don't lose the menu. 11:57 And when you're like. 12:00 Two or three menus deep. 12:01 Not only do you have to make sure that you have your cursor in the right place. 12:04 You also have to make sure that, you know, it's not 12:07 taking up, like, so much of the screen that it's ridiculous. 12:11 Like, it's just, there's a lot of problem with doing it, basically. 12:14 And so, this is a nice way to just consolidate all of that in 12:18 to a compact space where the user can keep their mouse in one spot. 12:22 >> Very nice. 12:27 >> Very cool stuff. 12:28 >> So I think that's about all we have for this episode. 12:29 Nick, who are you on Twitter. 12:31 >> I am @nickrp. 12:32 >> And I am @jseifer. 12:34 If you want more background on anything that 12:35 we talked about, check us out in iTunes. 12:37 Search for the Treehouse Show. 12:38 You can also find us on YouTube, at youtube.com/gotreehouse. 12:40 >> And of course, if you'd like to see more videos like this 12:44 one, where we talk about web design, web 12:47 development, iOS, Android, business, and so much more. 12:49 Be sure to check us out at teamtreehouse.com. 12:53 Thanks so much for watching, and we'll see ya next week [SOUND]. 12:57

You need to sign up for Treehouse in order to set up Workspace

Sign up