Episode 9: HTML5 Boilerplate

I'm Nick Pettit. >>I'm Jason Seifer. 0:02 [Nick Pettit]: and you're watching The Treehouse Show, 0:04 your weekly dose of Internets where we talk about all things web design, 0:06 web development, and more. 0:09 [Jason Seifer]: In this episode, we'll be talking about the 0:11 latest JavaScript project and some JavaScript books, 0:13 the new Firefox beta, 0:16 and our app review of the week is Moom. 0:18 [Nick Pettit]: Let's check it out. 0:20 [?music playing?] 0:22 [Jason Seifer]: The first project that we're going to be talking about this week 0:28 is something called, 'Holder.js.' 0:30 Holder.js is a piece of JavaScript 0:33 that does image placeholders 0:35 for your website. 0:37 The way it works is, you give it an image tag, 0:39 and for the source, you specify the path 0:41 to Holder.js. 0:43 Add a slash, and then specify the width and height 0:45 that you want the placeholder image. 0:48 This is going to be very, very useful 0:50 when developing sites, 0:52 and you maybe don't have all of the images 0:54 that you're going to be using in the final product, 0:56 but you can say something like, "Okay, an ad's going to be here, 0:58 it's going to be this size," 1:00 and it will flow right into your content 1:03 without, really, any work on your part. 1:05 There are some great examples at the site 1:07 of all different size placeholder images, 1:09 and you can see right here, it's very, very easy 1:11 to use with this image tag--just drop in the source 1:14 and the path, and you are good to go. 1:16 This weighs in at only 5 kilobytes, 1:19 so not really too much to put into your site, 1:22 especially if you're only showing it to a few people, 1:24 since this really is something that you're only going to be using 1:27 in development of a new site. 1:29 [Nick Pettit]: That's really, really cool. 1:31 See, I always like to develop in the browser 1:33 with HTML and CSS, so that makes it 1:35 a lot easier to just drop in a placeholder image, 1:37 instead of trying to box it out 1:39 with a full-colored div that looks really ugly, so-- 1:43 [Jason Seifer]: Yeah, and especially when the cat placeholders 1:46 are taking too long to load. 1:49 [Nick Pettit]: That's true. Those cat placeholders every time. 1:51 [Jason Seifer]: Always a big concern. 1:54 [Nick Pettit]: Alright. Next up is Picturefill, 1:56 which is a piece of JavaScript that will allow you 1:59 to make your responsive web images 2:01 load a lot more quickly. 2:04 Basically, it mimics the proposed 2:07 picture element, and it uses divs 2:10 instead of the picture element, just for the sake of 2:13 safety and cross-browser compatibility. 2:15 So, if I go ahead and click here 2:19 on their github page, 2:21 we have a little example here, 2:23 and I can show you a demo of how this works. 2:25 When I resize my web browser here, 2:27 it will go ahead and load in different images 2:30 based on the size of the browser. 2:34 [Jason Seifer]: Hey, there's Mike the frog. Hey, Mike. >>[Nick Pettit]: Hey, look at that. 2:37 Now, this is handy, 2:39 because you don't want to load in 2:41 a really huge image 2:43 if all you really need is a small image 2:45 for iPhone or an iPad, or something like that. 2:48 [Jason Seifer]: That's something, especially, that you'll have to 2:50 take into account on mobile connections. >>[Nick Pettit]: That's right. 2:52 [Jason Seifer]: This is also similar to a project we talked about in the last episode 2:55 of The Treehouse Show, however, it uses divs 2:58 instead of the figure and picture elements. >>[Nick Pettit]: That's right. 3:00 [Jason Seifer]: Next up, is a website called whatthekey.com-- 3:04 oh, I'm sorry, whatthekeycode.com. 3:08 If you've ever gone and developed 3:11 an app in JavaScript, 3:13 occasionally you will need to listen for a key code event. 3:15 This can be a bit difficult to go through and look up 3:18 the key code every time, 3:21 so you can just go to whatthekeycode.com, 3:23 type any key, and it will immediately 3:25 give you the JavaScript key code. Take a look at it here. 3:27 I'm going to just go press some keys, 3:30 and you can see as I am pressing them 3:31 on the site, 3:33 it is displaying the different numbers. [Nick Pettit]: That's pretty handy. 3:35 [Jason Seifer]: It is, and that's whatthekeycode.com 3:38 in case you forget. [Nick Pettit]: Got it memorized. 3:41 Wait, what was that again? [Jason Seifer]: whatthekeycode.com. 3:44 [Nick Pettit]: Okay, I got it this time. 3:47 Next up, is normalize.css 3:49 at necolas.github.com/normalize.css. 3:52 I think that's how you pronounce it. [Jason Seifer]: Good enough. 3:57 [Nick Pettit]: Basically, when you're coding websites, 3:59 you need to drop in some reset CSS. 4:02 Reset CSS will remove the default styling that the browser applies, 4:05 and it will remove all that default padding 4:09 and margin and, basically, create a level playing field, 4:11 so that it's easier to code your websites 4:14 across different browsers. 4:17 So, after you drop in your reset CSS, 4:20 you can go ahead and apply your own styling 4:22 on top of that. 4:25 Normalize is interesting, because it's 4:27 a modern HTML5-ready alternative 4:30 to CSS resets. 4:32 So, basically, there's been a lot of CSS resets 4:34 in the past, 4:36 and this is just the latest and greatest one. 4:38 [Jason Seifer]: This is the reset of the future. 4:40 [Nick Pettit]: That's right. 4:42 [Jason Seifer]: The present-future of past resets. 4:44 [Nick Pettit]: Tomorrow is today. 4:47 [Jason Seifer]: Well, I think that is a great time to segue-way 4:49 to our app review of the week. 4:51 [Nick Petti]: Let's check it out. 4:53 [?music playing?] 4:55 [Jason Seifer]: This week the app we're going to be taking a look at 5:00 is called, 'Moom' by Many Tricks, 5:02 and you can get that at manytricks.com/moom. 5:04 So, what does Moom do? 5:08 This is something that has turned out to be 5:10 an invaluable app for me. 5:13 This is an OS10 application 5:15 where--you see this little zoom button on the top left? 5:17 It gives you a menu right there. 5:20 Below that menu, is a few buttons 5:22 and a grid. 5:24 What this lets you do is, you can draw on this grid, 5:26 and it will resize the topmost window 5:28 to be the size of that grid. 5:31 It can also take it to fullscreen, 5:34 and this is very useful 5:36 if you've got something 5:38 like a text editor and a 5:40 Markdown editor side by side. 5:42 You can go ahead, click in there, it's got predefined sizes, 5:44 or you can define your own. 5:46 One thing that's really, really useful 5:48 about Moom is that you can even assign 5:51 custom key codes to the different sizes 5:53 and have it apply to different applications. 5:56 Myself, when I'm coding a site 5:58 using Rails, I've got a terminal open, 6:00 text editor, and a browser, and with 1 keystroke 6:02 you can have these all resized 6:04 to your preferred dimensions and layout. 6:06 Like I said, this can be extremely useful when going 6:09 from a laptop with an external monitor, 6:12 back and forth between the laptop-- 6:15 save you the time of resizing all these things. 6:17 This is not a sponsored review of the show, 6:19 this is just something that I find invaluable. 6:24 [Nick Pettit]: Shame on them. [Jason Seifer]: Shame on them, indeed. 6:26 [Nick Pettit]: You know, that's really interesting, 6:29 because one of the very few features from Windows, 6:31 particularly Windows 7, that I really like, 6:33 is that you can drag 6:36 windows to the left and right of the screen, 6:38 or I think you can drag them to the top 6:41 or something like that, and it will make them go fullscreen 6:43 or take up 1 side of the screen or the other, 6:45 so you can look at things side-by-side, 6:48 but that brings this functionality to-- 6:50 [Jason Seifer]: Oh, this does that, too, I didn't even mention it. 6:53 [Nick Pettit]: --brings it to Mac OS10, so that's pretty nifty. 6:55 Next up is HTML5 Boilerplate 6:58 and, speaking of CSS reset code, 7:02 this is actually kind of the 7:05 ultimate reset, in a way. 7:07 It's basically some HTML, 7:09 some CSS, and a few other things 7:12 that will give you a good, solid foundation 7:14 for building an HTML 5.0 future-ready website. 7:16 [Jason Seifer]: Now, this is brand new, right? 7:21 [Nick Pettit]: It's not brand new, Jason. I'm so glad you mentioned that. 7:23 This is, actually, the 4.0 version, 7:26 but if you haven't checked out Boilerplate before, 7:28 you should definitely take a look. 7:30 It's available at html5boilerplate.com, 7:32 and in version 4.0, 7:36 look at that, 7:38 they're using normalize.css, 7:40 a modern HTML5-ready alternative to CSS resets, which we just discussed. 7:43 It also includes the latest versions 7:48 of jQuery and Modernizr, 7:50 and it loads them in via Google CDN, 7:53 so you know that it's going to be 7:55 super-duper fast and super-reliable. 7:57 So, if you're starting a new web project, 8:00 Boilerplate is a pretty good 8:02 way to go, and then you can go ahead and 8:04 drop in your other features on top of that. 8:07 [Jason Seifer]: Nice. So next up, Firefox Beta 16-- 8:10 Firefox 16 Beta 1 8:14 has just recently been released. 8:16 Something that's really useful for developers 8:18 in this version, is a new console 8:21 that's going to let you have a command line 8:24 interface to Firefox itself. 8:26 What can you do with that? 8:28 Well, I'm glad you asked. 8:30 You can go through and actually control 8:32 different parts of the browser experience. 8:34 You can manipulate the showing of the inspector. 8:36 So, you can say something like "inspect," 8:39 give it a CSS path to what you want to inspect, 8:42 and it will bring that right up. 8:44 You can clear the console and open the console 8:46 from the command line. 8:49 Something that I find really interesting, 8:51 though, is you can resize the browser as well 8:53 by just saying "resize to" and give it different dimensions. 8:56 This is going to be really useful when, 9:00 say, testing your responsive designs 9:02 inside of the Firefox browser. 9:04 And finally, another feature that I really like 9:07 is the option to have screenshots 9:10 right from the command line, 9:12 and you can even give it different IDs 9:14 of what you want to have screenshots of, 9:17 and Firefox will save them for you. 9:19 So, pretty interesting developments for developers 9:21 in the latest beta of Firefox. 9:24 So, check that out if you get the chance. 9:27 Still need to be testing on Firefox. 9:29 [Nick Pettit]: That's pretty nifty. 9:31 Next up, just a quick little thing, 9:33 JSbooks, available at jsbooks.revolunet--like revolution, I guess--.com, 9:36 and in a previous episode 9:44 we covered something pretty similar to this 9:47 that showed a whole bunch of useful Python books. 9:49 Well, this is just a list of 9:52 all the best JavaScript books. 9:54 JavaScript, of course, being the language 9:57 that creates the behavioral layer 9:59 in HTML, CSS, and JavaScript. 10:02 So, pretty nifty 10:05 if you're looking to learn with books. 10:07 Of course, if you want to learn about JavaScript 10:10 on video, you should check out teamtreehouse.com. 10:12 [Jason Seifer]: Shameless self-promotion. >>[Nick Pettit]: Shameless. 10:16 [Jason Seifer]: Next up, 10:18 just another quick heads-up. 10:20 There is a theme that recently gained popularity. 10:22 This is a theme for your text editors, 10:24 and this is called the 'Tomorrow' theme, 10:26 and it is pretty, without being overbearing. 10:28 It has different configurations for 10:32 Vim, TextMate, Sublime--whatever you're using these days. 10:36 There's dark and light versions, 10:39 and pretty much any editor 10:41 that has gained popularity recently 10:44 will have a version of the Tomorrow theme. 10:46 Very pleasant to look at 10:48 and easy on the eyes, which is something that you're going to be looking for 10:50 when you stare at text all day. 10:52 [Nick Pettit]: Very, very true. When you do look at text all day long, 10:55 you definitely want to have a pretty nice-looking theme. 10:58 Seems like a small thing, but it really does 11:00 affect the way you work. 11:04 So, Jason, what have we learned today? 11:06 [Jason Seifer]: We learned that Firefox is pretty awesome 11:08 for its developer tools in the latest beta, 11:11 and that we should all check that out. 11:13 [Nick Pettit]: I would have to agree. 11:15 Thank you guys so much for watching. I'm @NICKRP on Twitter. 11:17 [Jason Seifer]: I'm @JSEIFER. Thanks so much for tuning in 11:20 to this episode of The Treehouse Show. 11:22 For show notes and more, 11:24 check out our YouTube channel 11:26 at YouTube.com/gotreehouse. 11:28 [Nick Pettit]: This episode was brought to you by Treehouse, 11:30 the best way to learn web design, web development, 11:33 mobile business, and more. 11:35 You can check us out at teamtreehouse.com 11:37 We'll see you next week. 11:39 [?music playing?] 11:42