Episode 6: Twitter Bootstrap and JavaScript for Cats

Hi! I'm Nick Pettit. >>I'm Jason Seifer. >>And you're watching "The Treehouse Show." 0:02 Your weekly dose of Internets where we talk about all things 0:05 web design, web development, and more. 0:08 In this episode, we will be going over a new proposed solution for web browsers 0:10 for high-resolution images, new versions of Twitter Bootstrap, 0:14 and the usual roundup of interesting JavaScript plugins. 0:18 So let's go ahead and get started. 0:21 [The Treehouse Show] 0:26 Believe it or not, the W3C is actually working on CSS4 0:29 I don't believe it. 0:34 You should believe it because it's happening. 0:36 Basically, there has been a lot of high-resolution devices coming out from Apple; 0:39 namely there's the iPad-- >>iPhone-- >>iPhone and now the new retina display MacBook Pros. 0:46 And of course there's a lots of other device manufacturers 0:52 coming out with high-resolution devices, 0:54 and the W3C decided that the best way to deal with these would be with CSS, 0:56 and fortunately, Safari and Chrome are now shipping 1:02 this new proposed high-resolution image solution. 1:06 It's available in Safari 6 and Chrome 21 1:11 in the form of the image set value that you apply to background images. 1:15 So basically you have a low-resolution image or a normal-resolution image, 1:21 and then you have your high-res version 1:26 and you have an additional value where you can kind of specify 1:28 what resolution each one of those images is at. 1:32 That seems to be like a little bit better of a solution to me 1:36 than the JavaScript plugins that we've been talking about. 1:39 I think it's really cool that they'll have it right in CSS rather than kind of a hacky stuff 1:42 that we've been having to do with JavaScript; not to demean 1:47 those plugins at all because they're wonderful. 1:50 Yeah, I know, I totally agree. 1:52 I mean going in and trying to detect with JavaScript seems a little bit messy, 1:54 and it's nice to have a native built-in solution. 1:57 Although we are probably going to have to deal with detection for a long time. >>For a little bit. 2:00 Next up, we've talked about Twitter Bootstrap in the past on this show, 2:05 and version 2.1.0 has just been released. 2:09 New in this version of Twitter Bootstrap is new documentations, something called 2:13 the "Affix Plugin" which is going to let a little side bar on your screen stay with you as you scroll. 2:18 There's submenus on dropdowns, block buttons, 2:25 new image styles, fluid grid offsets, a new navbar, 2:28 and--this is pretty big--increased font size and line height. 2:32 So if you're interested in Bootstrap or you currently have Bootstrap, 2:38 go ahead and check it out and upgrade. 2:42 Pretty cool stuff; now, speaking of Bootstrap, 2:44 Dan Grossman has this really cool date range picker that's designed for, 2:47 you guessed it, Twitter Bootstrap. 2:53 Basically, he was working on Improvely and he needed this date range picker, 2:55 So he went ahead and created one. 3:01 You have reservation dates here as one example 3:04 where you can kind go ahead and select a start date and an end date, 3:08 and it will apply them in real time. That's pretty cool. 3:12 And there's also predefined ranges, so you can pick things like today, yesterday, last seven days, 3:15 and it will go ahead and update those in real time. 3:22 Now, this does require jQuery or relies on jQuery, but that's not really a huge deal. 3:25 I think lots of sites include jQuery these days. 3:33 Yeah, something like 80% of the top websites include jQuery, 3:35 and something like 90% of all the statistics I tell you are not true. 3:40 Next up, you know what I really hate, Nick, is pressing buttons when I'm developing things, 3:44 primarily the reload button. 3:50 Isn't it such a drag to tap that or press Command-R? 3:52 It is. >>Well, I have wonderful news for you. 3:55 There is a new plugin kind of system called "Reload." 3:58 So this uses Node.js and Grunt, and it works on Safari. 4:03 What it does, it watches a certain directory for you, you tell what files to watch, 4:08 and as soon as one of those files changes, you know CSS or JavaScript, 4:11 it goes through and reloads your web browser for you. 4:15 Boom, done. You can get back to the important stuff like browsing the Internet. 4:18 Browsing Reddit, Facebook. >>Yeah. 4:22 Et cetera. That's really important. >>Yeah. 4:25 That's cool. I remember there are being similar features on lots of other frameworks and things, 4:27 and like when you're working with SAS, 4:33 you can go ahead and tell it to watch a directory or similar things like that, 4:35 but this seems like a more generalized solution. 4:40 So when your developing HTML and CSS, it can go ahead and do that for you. 4:42 It's similar to a paid application called "LiveReload" which does the same thing SAS and CSS, 4:46 and that one is actually pretty cool because if you modify CSS files in LiveReload, 4:52 you don't even have to reload the page. 4:56 That's why it's called "LiveReload." 4:58 Wow. >>Yeah, fancy.->>Aptly named. 5:00 Next up is BigVideo.js, and this is really cool. 5:03 Basically, you can apply a background image to your website that is a giant video. 5:08 It requires jQuery UI and actually several other things, 5:15 Video.js API, in order for it to work, 5:23 and in my opinion, I think it's more of a novelty than anything else. 5:25 I don't really see a legitimate use for this. 5:30 I think it's kind of--I don't know--I guess if you had a video that was really, really subtle, 5:34 maybe like a galaxy with star background and had like-- 5:40 Music video. >>Little twinkling lights. Probably not a music video. 5:44 No, this would be awesome on my Myspace page. 5:48 Yeah, definitely. >>Gigantic video of me in the background. 5:50 Yeah, I don't see a legit use for this, but nonetheless, it is really, really cool. 5:54 Next up, I'm just going to move on from there since we disagree pretty heavily on that. >>Yeah. 6:01 There is an introduction for new programmers to JavaScript called "JavaScript for Cats." 6:07 There's not really much to say about this, but it is a wonderful, 6:12 wonderful and free introduction to the JavaScript programming languages, 6:16 and it uses cats. 6:20 So there's literally nothing not to like about this website. 6:23 Go ahead if you've got somebody who is interested in learning JavaScript 6:27 or if you want to learn JavaScript, take a look at jsforcats.com. 6:30 Now, Jason, I can't think of anywhere else that I might go to learn JavaScript. 6:36 Me neither. >>Maybe other than teamtreehouse.com. 6:41 No, I don't think. I don't think that's a thing. 6:45 Yeah, I think teamtreehouse.com is where you could learn JavaScript. 6:48 Pretty sure you just made that up. >>Yup. 6:53 Next up is Underscores which is a--it's not a WordPress theme. 6:55 It's a starter theme or it's a way to create themes for WordPress. 7:01 So basically you go to Underscores.me and you go ahead and type in the name of your theme. 7:06 So I'll call mine maybe the-- >>Call it Jason. 7:13 Treeshouse theme. Okay, I'll go ahead and call it Jason, 7:16 and then you can go ahead and type in advance options such as your slug, 7:19 the author, URI description, et cetera, and you hit generate. 7:23 Now, this is not a WordPress theme like I said. 7:29 It's just a starter theme, but it has lots of well commented HTML5 templates; 7:33 it has a nice 404 template and lots of other cool CSS to go ahead 7:40 and just get you started developing a WordPress theme. 7:45 That's really great because it can be kind of tedious to start developing your own WordPress theme 7:49 especially having to go and take a theme and modify it 7:53 and get everything out of there that's already implemented. 7:55 Absolutely. >>Next up, we have something called cdnjs.com. 7:59 Cdnjs is a CDN or content delivery network for hosting JavaScript libraries. 8:03 Google CDN and Microsoft CDN already host JavaScript libraries for you. 8:10 What this one does is host some of the less popular libraries for using your application. 8:16 There is a huge list of things that have a decent amount of followers 8:21 and you'll probably be using in your apps. 8:25 So, if you are using a CDN or if you're not using a CDN right now, 8:28 go ahead and check out cdnjs.com. 8:33 It's really easy to just throw that piece of JavaScript in the website and boom, done. 8:36 Boom, done. >>Boom. >>Boom. >>Boom. 8:40 Next up is JustGage at justgage.com. 8:44 Gage is spelled G-A-G-E, 8:49 and JustGage is basically a JavaScript plugin 8:52 that allows you to create nice, animated, clean-looking gages. 8:57 Now, we've seen this before, Jason. >>It's true. 9:03 We've seen these gages appear elsewhere. We've covered them in the past on the show. 9:06 Gages are pretty hot right now. 9:10 They are, and we saw this new piece of JavaScript that allows you to create gages, 9:12 and we started talking about what legitimate uses for gages might be. 9:19 We couldn't readily think of any, but we did come up with one, maybe using the login process to websites. 9:24 Start typing in your username, gage starts to spike up about 50%, 9:32 type in password, 75%, sign in. 9:36 Or maybe as you're scrolling down the page, 9:39 the gage can tell you how close you are to the bottom. 9:41 Or how fast you're scrolling. 9:43 Ooh, yeah. That's a good one. It'd be like a scroll limit or speedmeter. 9:45 Don't want to get scrolling speeding ticket. 9:50 (Laughing) I hate those. >>Yeah. 9:52 You could have the X and Y position of your mouse with gages. 9:54 These are all legitimate uses. >>That might be really nice. 9:59 Probably the best one, though, that we thought up was the gage that starts at 100% 10:01 when you sign up for dating website 10:05 and slowly goes down as you fill out your profile and upload pictures. 10:07 Yeah, the more it learns about you, the-- >>The less it likes you. 10:11 The less--the less it likes you. 10:16 Actually, there is a lot of legitimate uses for gages, but I think they are very specific-use cases. 10:18 Yeah, we're being a little bit harsh. >>One--(laughs) A little bit. 10:26 One in particular that I really like is on the Google web fonts directory. 10:29 When you go to pick a fonts and you click on "Quick Use," 10:33 they have this really nice gage over on the right side 10:38 that tells you how that font might impact your page load time. 10:41 So, it's kind of nice. It's kind of, I guess, a different way of presenting quantitative information like that. 10:45 Yeah, maybe download sizes as you assemble. >>Yeah. 10:51 A custom JavaScript library or framework. >>Exactly. >>Things like that. 10:54 So, Jason, what do we learn today? 10:58 We learned that gages are awesome. 11:01 And I think that I learned you can't do JavaScript without cats. 11:04 Pretty useful information. >>Yeah, definitely. 11:09 I think we all learned something here today. 11:12 That is it for this week's episode. 11:14 Please go ahead and follow us, I am @nickrp on Twitter. 11:16 I'm @jseifer on Twitter. 11:20 Thank you so much for joining us, and we will see you next week. 11:22 [The Treehouse Show] 11:26

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

Sign up