1 00:00:00,025 --> 00:00:02,060 [SOUND] >> I'm Nick Pettit. 2 00:00:02,060 --> 00:00:03,100 >> I'm Jason Seifer. 3 00:00:03,100 --> 00:00:04,830 >> And you're watching the Treehouse Show. 4 00:00:04,830 --> 00:00:06,630 Your weekly dose of internet where we talk 5 00:00:06,630 --> 00:00:09,820 about all things web design, web development and more. 6 00:00:09,820 --> 00:00:12,290 >> In this episode we'll be talking about cross browser 7 00:00:12,290 --> 00:00:18,880 HTML5 video, The Web as a Gaming Platform jQuery2.0 and more. 8 00:00:18,880 --> 00:00:20,254 >> Let's check it out. 9 00:00:20,254 --> 00:00:26,282 [MUSIC] 10 00:00:26,282 --> 00:00:31,222 >> First up, over on the Cats Who Code blog, which is basically the Internet and 11 00:00:31,222 --> 00:00:33,806 coding combined, there is a blog post on 12 00:00:33,806 --> 00:00:37,338 cross browser HTML5 video and how you implement it. 13 00:00:37,338 --> 00:00:39,891 Now, it's actually not as hard as you might 14 00:00:39,891 --> 00:00:43,960 expect to implement cross prow, cross browser HTML5 video. 15 00:00:43,960 --> 00:00:46,390 So let's take a little look at how we do it. 16 00:00:46,390 --> 00:00:48,920 Step one, is prepare the files. 17 00:00:48,920 --> 00:00:51,300 This makes a lot of sense if you're gonna be serving videos. 18 00:00:51,300 --> 00:00:55,040 Well, you need to have them in formats that all the different browsers can read. 19 00:00:55,040 --> 00:00:59,150 So, there is an online conversion site that you can use. 20 00:00:59,150 --> 00:01:00,620 You upload your video, and then you 21 00:01:00,620 --> 00:01:03,480 can download it in the different formats required. 22 00:01:03,480 --> 00:01:08,340 Next up, it's actually really easy to use to create a video tag. 23 00:01:08,340 --> 00:01:09,020 That's all it is. 24 00:01:09,020 --> 00:01:11,120 Just use a video tag and then list 25 00:01:11,120 --> 00:01:15,060 the different sources that the converted files come in. 26 00:01:15,060 --> 00:01:16,370 So you upload them to 27 00:01:16,370 --> 00:01:19,490 the site, give it the different path and you're ready to go. 28 00:01:19,490 --> 00:01:25,130 Finally, you need to tell your web server how to process those different files 29 00:01:25,130 --> 00:01:29,520 so that you add the different types using the ht access files in Apache. 30 00:01:29,520 --> 00:01:32,160 Engine X will have slightly different syntax. 31 00:01:32,160 --> 00:01:34,550 Finally you can use an object tag to create 32 00:01:34,550 --> 00:01:38,460 a fallback for older browsers, and that is it. 33 00:01:38,460 --> 00:01:42,080 That is all you have to do to serve HTML5 video. 34 00:01:42,080 --> 00:01:44,510 Nick, could that be any easier? >> I don't think so. 35 00:01:44,510 --> 00:01:45,480 >> I don't think so either. 36 00:01:45,480 --> 00:01:49,080 >> I, unless you could just push a button and it happens. 37 00:01:49,080 --> 00:01:50,150 Automatically. 38 00:01:50,150 --> 00:01:51,950 >> I didn't think [CROSSTALK] about that but that's a very good point. 39 00:01:51,950 --> 00:01:54,070 >> Slightly easier. >> Yeah. 40 00:01:54,070 --> 00:01:58,340 >> Next up is this amazing post over on the Mozilla blog. 41 00:01:58,340 --> 00:02:00,400 And I'm gonna preface this by saying this 42 00:02:00,400 --> 00:02:03,980 is very advanced and even I barely understand it. 43 00:02:03,980 --> 00:02:05,600 But we're gonna take a look at it anyway. 44 00:02:06,670 --> 00:02:07,690 Basically 45 00:02:07,690 --> 00:02:13,220 Mozilla is, has teamed up with Epic games and they have ported the 46 00:02:13,220 --> 00:02:18,355 Unreal engine three to the web using this highly optimized 47 00:02:18,355 --> 00:02:24,450 version of Javascript that's that's inside of their web browser. 48 00:02:24,450 --> 00:02:29,635 So they you know, just did something that's completely amazing here. 49 00:02:29,635 --> 00:02:32,947 It uses Javascript, HTML, 50 00:02:32,947 --> 00:02:34,329 and web GL. 51 00:02:34,329 --> 00:02:39,441 And if you go ahead and watch the videos, it, I mean, it just has absolutely amazing 52 00:02:39,441 --> 00:02:42,177 frame rates right in the browser and I'm 53 00:02:42,177 --> 00:02:45,602 just completely shocked at that this is even possible. 54 00:02:45,602 --> 00:02:49,994 That we're like at this point where we can start considering developing 55 00:02:49,994 --> 00:02:54,510 games, and high performance 3D games at that, inside of the browser. 56 00:02:54,510 --> 00:02:59,610 >> Yeah it, it's pretty amazing. The the project they use is called asm.js 57 00:02:59,610 --> 00:03:02,270 which is a smaller subset of JavaScript and 58 00:03:02,270 --> 00:03:04,660 that's what let's them optimize it so much. 59 00:03:04,660 --> 00:03:08,580 That's integrated into newer versions of Firefox nightlies. 60 00:03:08,580 --> 00:03:10,880 >> Look at that, this guy, adding some clarity. 61 00:03:10,880 --> 00:03:12,650 >> Pretty amazing stuff. >> Yup. 62 00:03:12,650 --> 00:03:16,350 Very, very, very cool and I think you know, 63 00:03:16,350 --> 00:03:17,920 I think this is kind of like the next, 64 00:03:17,920 --> 00:03:21,200 next horizon, in my opinion, but, I, I think 65 00:03:21,200 --> 00:03:24,950 were gonna start seeing some really amazing games developed inside 66 00:03:24,950 --> 00:03:26,720 of the browser so. >> I hope so. 67 00:03:26,720 --> 00:03:28,640 >> I don't know what that's going to mean for 68 00:03:28,640 --> 00:03:32,430 web developers or for the gaming industry but it's certainly exciting. 69 00:03:32,430 --> 00:03:35,100 >> It means you have to know how to code games on the web. 70 00:03:35,100 --> 00:03:36,640 >> That's right. 71 00:03:36,640 --> 00:03:37,920 >> Next up big news. 72 00:03:37,920 --> 00:03:41,380 jQuery 2.0 has been released. 73 00:03:41,380 --> 00:03:44,850 Big news because pretty much everybody uses jQuery these days. 74 00:03:44,850 --> 00:03:46,170 >> And this is version 2.0. 75 00:03:46,170 --> 00:03:46,560 >> Yeah. 76 00:03:46,560 --> 00:03:49,120 >> I mean, jQuery has been around for quite some time. 77 00:03:49,120 --> 00:03:50,290 So Having 78 00:03:50,290 --> 00:03:52,580 a 2.0 released, >> Monumental. 79 00:03:52,580 --> 00:03:53,610 >> Pretty crazy. 80 00:03:53,610 --> 00:03:55,590 >> Yeah, so one of the big things about 81 00:03:55,590 --> 00:04:00,500 jQuery 2.0 is that it drops support for older browsers. 82 00:04:00,500 --> 00:04:03,892 IE 6, 7 and 8 will not work with jQuery 2.0. 83 00:04:03,892 --> 00:04:07,280 If you do need to use IE 6, 7, and 8, you can still 84 00:04:07,280 --> 00:04:13,230 use jQuery 1.9 they say not to worry because they're going to be supporting it. 85 00:04:13,230 --> 00:04:16,200 Now the big benefit that you're gonna get with jQuery 86 00:04:16,200 --> 00:04:21,260 2.0 is that since those older browsers don't need to be supported, all the code 87 00:04:21,260 --> 00:04:25,270 that dealt with the workarounds for them has been able to be dropped from jQuery. 88 00:04:25,270 --> 00:04:27,940 Now some of that code was causing problems on it's own, 89 00:04:27,940 --> 00:04:31,850 so what you get is just speedier sites on newer browsers. 90 00:04:31,850 --> 00:04:35,160 And by newer we mean IE nine and up and almost any 91 00:04:35,160 --> 00:04:41,010 version of Firefox, Chrome, Safari, whatever will be supported in jQuery 2.0. 92 00:04:41,010 --> 00:04:43,170 Anyway, go ahead and download that. 93 00:04:43,170 --> 00:04:45,280 Use it on your site, install it, good to go. 94 00:04:45,280 --> 00:04:46,490 We'll link to a change log in the 95 00:04:46,490 --> 00:04:50,580 show notes that you can get to at youtube.com/gotreehouse. 96 00:04:50,580 --> 00:04:52,310 Or in our iTunes feed. 97 00:04:52,310 --> 00:04:54,789 >> I'm pretty shocked that they're actually 98 00:04:54,789 --> 00:04:57,450 dropping support for IE 6, 7, and 8. 99 00:04:57,450 --> 00:05:00,820 I guess I'm less shocked about 6 and 7, 100 00:05:00,820 --> 00:05:04,250 but 8 is you know, still pretty widely used. 101 00:05:04,250 --> 00:05:06,120 >> It. >> So, it, it's interesting 102 00:05:06,120 --> 00:05:10,800 because jQuery is used just almost everywhere on the web, and so they have a 103 00:05:10,800 --> 00:05:17,240 lot of sway in terms of what browsers should be used by used by people. 104 00:05:17,240 --> 00:05:17,750 So. 105 00:05:17,750 --> 00:05:18,890 >> Yeah, well they do. 106 00:05:18,890 --> 00:05:21,000 And, that's why they give you the option of staying 107 00:05:21,000 --> 00:05:24,850 on 1.9, if you do need to support those older browsers. 108 00:05:24,850 --> 00:05:28,210 Which, unfortunately some of us still do. 109 00:05:28,210 --> 00:05:31,330 >> That's right, so, pretty, pretty amazing 110 00:05:31,330 --> 00:05:33,230 >> Now, when I say support, I mean be able to use 111 00:05:33,230 --> 00:05:35,910 it on your site, not like, console it during times of need. 112 00:05:35,910 --> 00:05:36,590 >> Mm. 113 00:05:36,590 --> 00:05:38,540 Like, like I do for you. 114 00:05:38,540 --> 00:05:40,400 >> Yeah. >> Occasionally. 115 00:05:40,400 --> 00:05:45,330 Next up, related is not related to me consoling Jason, related to jQuery. 116 00:05:45,330 --> 00:05:46,180 >> Thank you for that. 117 00:05:46,180 --> 00:05:50,400 >> Is, is, is, is jQuery, jQuery Builder. 118 00:05:51,510 --> 00:05:56,200 JQuery Builder lets you easily build a custom version of jQuery. 119 00:05:56,200 --> 00:05:58,990 And so just like we're discussing. 120 00:05:58,990 --> 00:06:02,727 You can go ahead and select Version 2.0, which 121 00:06:02,727 --> 00:06:05,990 includes a lot more modules, or you can go ahead 122 00:06:05,990 --> 00:06:09,110 and drop it back down to, 1.9, if you 123 00:06:09,110 --> 00:06:12,275 do need to go ahead and support Internet Explorer 8. 124 00:06:12,275 --> 00:06:16,520 And then you bas, then you just check off the modules 125 00:06:16,520 --> 00:06:21,230 that you wanna go ahead and include and it will give you 126 00:06:21,230 --> 00:06:26,290 a button where you can go ahead and build that, download it or you can do it from 127 00:06:26,290 --> 00:06:31,095 the command line and get it from GitHub and they even offer a 128 00:06:31,095 --> 00:06:38,200 node.js command line interface tool so you can go ahead and install it that way. 129 00:06:38,200 --> 00:06:41,490 So pretty cool stuff, I mean it's there's not a whole lot of stuff to say 130 00:06:41,490 --> 00:06:46,460 about it, but it's you know, a nifty way to go ahead and just build a custom 131 00:06:46,460 --> 00:06:50,660 version of jQuery that could go ahead and save you a little bit of file space. 132 00:06:51,800 --> 00:06:57,499 >> Hot on the heels of that is a blog post about shame.css, very appropriate. 133 00:06:57,499 --> 00:06:58,400 >> [LAUGH] 134 00:06:58,400 --> 00:07:01,110 >> This is a blog post by Harry Roberts 135 00:07:01,110 --> 00:07:05,390 who talks about design patterns when working with css. 136 00:07:05,390 --> 00:07:08,340 Now if you do need to support older browsers, at 137 00:07:08,340 --> 00:07:12,260 some point you'll have to use some hacks in your CSS 138 00:07:12,260 --> 00:07:14,400 to get things to display correctly. 139 00:07:14,400 --> 00:07:18,613 >> Now you want to try to avoid hacks, of course, in your CSS, but. 140 00:07:18,613 --> 00:07:20,710 >> Things happen. >> Yeah. 141 00:07:20,710 --> 00:07:24,270 I mean, in practical use cases, yeah, there, there are 142 00:07:24,270 --> 00:07:27,780 situations where you do have hacks that you have to use. 143 00:07:27,780 --> 00:07:28,000 >> Right. 144 00:07:28,000 --> 00:07:29,540 You know, maybe you don't have to have time to 145 00:07:29,540 --> 00:07:32,320 optimize something, and you gotta get the site out yesterday. 146 00:07:32,320 --> 00:07:39,650 Anyway what Harry is saying is put this all in a file called shame.css, and 147 00:07:39,650 --> 00:07:43,100 then comment about why you're using these hacks. 148 00:07:43,100 --> 00:07:45,720 And then later when you have time to refactor 149 00:07:45,720 --> 00:07:48,800 you can go through and change up your css file. 150 00:07:48,800 --> 00:07:51,830 Take it out of shame.css, or whatever. 151 00:07:51,830 --> 00:07:56,150 Now, what he's saying to do, what's a really important part of this is you don't 152 00:07:56,150 --> 00:08:01,870 want this file, like, just as a file out on your web server called shame.css. 153 00:08:01,870 --> 00:08:05,414 You should be using a css preprocessor to concatenate and 154 00:08:05,414 --> 00:08:07,550 minify your css files. 155 00:08:07,550 --> 00:08:11,170 So put it in there and then let the preprocessor deal with it. 156 00:08:11,170 --> 00:08:15,050 And if you're not using a preprocessor maybe use some 157 00:08:15,050 --> 00:08:18,160 sort of build script beforehand to get that all going. 158 00:08:18,160 --> 00:08:20,700 >> Or you could just rename it, you know? 159 00:08:20,700 --> 00:08:21,560 >> That's a good point. 160 00:08:21,560 --> 00:08:23,873 >> Yep. >> These are not hacks.css. 161 00:08:23,873 --> 00:08:25,380 >> That's right. 162 00:08:25,380 --> 00:08:30,512 Next up is this amazing tool called UI Faces, and it's basically like 163 00:08:30,512 --> 00:08:34,340 lorem ipsum text but for avatars. >> Nice. 164 00:08:34,340 --> 00:08:37,870 >> So let's say that you're building a new interface and 165 00:08:37,870 --> 00:08:41,860 you need to go ahead and put some profile pictures in there. 166 00:08:41,860 --> 00:08:42,800 Eh, you know. 167 00:08:42,800 --> 00:08:48,320 This is just a quick way to get some, some photos that are representative of what 168 00:08:48,320 --> 00:08:52,860 normal people use as profile pictures. >> Like that Batman avatar. 169 00:08:52,860 --> 00:08:55,660 >> That's right. And you can go ahead and drop them into 170 00:08:55,660 --> 00:08:56,910 your prototype. 171 00:08:56,910 --> 00:08:59,080 You can, of course, adjust the size of 172 00:08:59,080 --> 00:09:02,880 these avatars, just with this little slider right here. 173 00:09:02,880 --> 00:09:08,950 You can adjust the spacing between them, and you can even adjust the border radii. 174 00:09:08,950 --> 00:09:10,500 And let's say, will it go? 175 00:09:10,500 --> 00:09:11,340 Yeah, look at that. 176 00:09:11,340 --> 00:09:13,600 You can even adjust the border radii to 177 00:09:13,600 --> 00:09:17,100 the point where the avatars are just a circle. 178 00:09:17,100 --> 00:09:19,240 So that's, pretty cool there. 179 00:09:21,300 --> 00:09:25,090 again, similar to jQuery builder, there's not a whole lot to 180 00:09:25,090 --> 00:09:29,270 say about this, but it's still really nifty if you're prototyping 181 00:09:29,270 --> 00:09:31,690 an app and you just wanna get some avatars in there 182 00:09:31,690 --> 00:09:34,840 and you just, you know, wanna go for it so, pretty cool. 183 00:09:34,840 --> 00:09:35,480 >> Really nice. 184 00:09:35,480 --> 00:09:36,542 >> Yeah. 185 00:09:36,542 --> 00:09:41,690 >> Next up we have a link to an online book called Single page Apps In Depth. 186 00:09:41,690 --> 00:09:47,180 If you're using a single page application framework like backbone, spine,js, 187 00:09:47,180 --> 00:09:51,190 or many of the others that we've talked about here on the Treehouse Show 188 00:09:51,190 --> 00:09:53,330 before, you could go back and watch 189 00:09:53,330 --> 00:09:56,870 every other episode for more information on that. 190 00:09:56,870 --> 00:09:59,730 Anyway so this book walks through everything that you're 191 00:09:59,730 --> 00:10:02,610 gonna need to know when coding a single page application. 192 00:10:02,610 --> 00:10:06,260 Now, obviously we're not gonna be able to go through everything on here, 193 00:10:06,260 --> 00:10:07,960 but it goes through everything from 194 00:10:07,960 --> 00:10:12,210 writing maintainable code, looking at the implementation. 195 00:10:12,210 --> 00:10:16,540 How to use different views and templating, you know binding the data 196 00:10:16,540 --> 00:10:21,310 from HTML to the DOM and the models on the back end. 197 00:10:21,310 --> 00:10:25,810 So there's just a ton of different nuances to building single page 198 00:10:25,810 --> 00:10:30,340 applications, and this book does a really good job of going through them. 199 00:10:30,340 --> 00:10:33,230 You can find a link to that in the show notes in our 200 00:10:33,230 --> 00:10:36,220 iTunes feed at the Treehouse Show 201 00:10:36,220 --> 00:10:38,670 or on our Youtube channel at youtube.com/gotreehouse. 202 00:10:39,880 --> 00:10:42,670 Next up is this really cool post from 203 00:10:42,670 --> 00:10:48,690 Codrops where they built these responsive, multi-level menus. 204 00:10:48,690 --> 00:10:49,020 >> Ooh. 205 00:10:49,020 --> 00:10:51,060 >> That is quite the tongue twister. 206 00:10:52,610 --> 00:10:54,570 So let's go ahead and look at the demo 207 00:10:54,570 --> 00:10:58,930 here, I'm gonna go ahead and click on this. 208 00:10:58,930 --> 00:11:02,080 Very common three line menu design pattern 209 00:11:02,080 --> 00:11:04,510 we've talked about that on the show before. 210 00:11:04,510 --> 00:11:04,920 So, 211 00:11:04,920 --> 00:11:09,730 go ahead and click on that and it brings up you know, this pretty normal looking 212 00:11:09,730 --> 00:11:16,220 menu as you'd expect however when I click into this menu whoa, look at that. 213 00:11:16,220 --> 00:11:16,910 >> Whoa. 214 00:11:16,910 --> 00:11:20,140 Are we in the future? >> It's looking that way, Jason. 215 00:11:20,140 --> 00:11:25,825 Basically, you click on this and it will slide the next level of the menu over. 216 00:11:25,825 --> 00:11:27,910 They have a couple of different demos here. 217 00:11:27,910 --> 00:11:30,150 So let's go ahead and see what this one does. 218 00:11:32,120 --> 00:11:33,270 Very cool stuff. 219 00:11:33,270 --> 00:11:38,040 Basically, each demo is just a different style of, of animation. 220 00:11:39,440 --> 00:11:43,170 But it's a nice way to do menus because 221 00:11:43,170 --> 00:11:45,520 a lot of times when you have multilevel menus like 222 00:11:45,520 --> 00:11:49,740 this, you're sort of, moving your mouse and like, you 223 00:11:49,740 --> 00:11:52,990 want to like, make sure the menu doesn't go away. 224 00:11:52,990 --> 00:11:54,960 So you go to the next. >> Right. 225 00:11:54,960 --> 00:11:57,430 >> One, and you have to like, make sure that you're hovered 226 00:11:57,430 --> 00:12:00,720 over in the right area, and that you don't lose the menu. 227 00:12:00,720 --> 00:12:01,740 And when you're like. 228 00:12:01,740 --> 00:12:04,520 Two or three menus deep. 229 00:12:04,520 --> 00:12:07,790 Not only do you have to make sure that you have your cursor in the right place. 230 00:12:07,790 --> 00:12:11,230 You also have to make sure that, you know, it's not 231 00:12:11,230 --> 00:12:14,820 taking up, like, so much of the screen that it's ridiculous. 232 00:12:14,820 --> 00:12:18,130 Like, it's just, there's a lot of problem with doing it, basically. 233 00:12:18,130 --> 00:12:22,560 And so, this is a nice way to just consolidate all of that in 234 00:12:22,560 --> 00:12:27,060 to a compact space where the user can keep their mouse in one spot. 235 00:12:27,060 --> 00:12:28,190 >> Very nice. 236 00:12:28,190 --> 00:12:29,420 >> Very cool stuff. 237 00:12:29,420 --> 00:12:31,440 >> So I think that's about all we have for this episode. 238 00:12:31,440 --> 00:12:32,710 Nick, who are you on Twitter. 239 00:12:32,710 --> 00:12:34,030 >> I am @nickrp. 240 00:12:34,030 --> 00:12:35,830 >> And I am @jseifer. 241 00:12:35,830 --> 00:12:37,350 If you want more background on anything that 242 00:12:37,350 --> 00:12:38,940 we talked about, check us out in iTunes. 243 00:12:38,940 --> 00:12:40,450 Search for the Treehouse Show. 244 00:12:40,450 --> 00:12:44,410 You can also find us on YouTube, at youtube.com/gotreehouse. 245 00:12:44,410 --> 00:12:47,750 >> And of course, if you'd like to see more videos like this 246 00:12:47,750 --> 00:12:49,580 one, where we talk about web design, web 247 00:12:49,580 --> 00:12:53,900 development, iOS, Android, business, and so much more. 248 00:12:53,900 --> 00:12:57,108 Be sure to check us out at teamtreehouse.com. 249 00:12:57,108 --> 00:13:03,113 Thanks so much for watching, and we'll see ya next week [SOUND].