1 00:00:02,120 --> 00:00:05,270 Hi! I'm Nick Pettit. >>I'm Jason Seifer. >>And you're watching "The Treehouse Show." 2 00:00:05,500 --> 00:00:08,170 Your weekly dose of Internets where we talk about all things 3 00:00:08,170 --> 00:00:10,550 web design, web development, and more. 4 00:00:10,550 --> 00:00:14,680 In this episode, we will be going over a new proposed solution for web browsers 5 00:00:14,680 --> 00:00:18,060 for high-resolution images, new versions of Twitter Bootstrap, 6 00:00:18,060 --> 00:00:21,080 and the usual roundup of interesting JavaScript plugins. 7 00:00:21,080 --> 00:00:23,150 So let's go ahead and get started. 8 00:00:26,480 --> 00:00:28,760 [The Treehouse Show] 9 00:00:29,220 --> 00:00:34,550 Believe it or not, the W3C is actually working on CSS4 10 00:00:34,550 --> 00:00:36,040 I don't believe it. 11 00:00:36,040 --> 00:00:39,090 You should believe it because it's happening. 12 00:00:39,090 --> 00:00:46,000 Basically, there has been a lot of high-resolution devices coming out from Apple; 13 00:00:46,000 --> 00:00:52,450 namely there's the iPad-- >>iPhone-- >>iPhone and now the new retina display MacBook Pros. 14 00:00:52,450 --> 00:00:54,620 And of course there's a lots of other device manufacturers 15 00:00:54,620 --> 00:00:56,440 coming out with high-resolution devices, 16 00:00:56,440 --> 00:01:02,210 and the W3C decided that the best way to deal with these would be with CSS, 17 00:01:02,210 --> 00:01:06,690 and fortunately, Safari and Chrome are now shipping 18 00:01:06,690 --> 00:01:11,410 this new proposed high-resolution image solution. 19 00:01:11,410 --> 00:01:15,640 It's available in Safari 6 and Chrome 21 20 00:01:15,640 --> 00:01:21,940 in the form of the image set value that you apply to background images. 21 00:01:21,940 --> 00:01:26,490 So basically you have a low-resolution image or a normal-resolution image, 22 00:01:26,490 --> 00:01:28,740 and then you have your high-res version 23 00:01:28,740 --> 00:01:32,910 and you have an additional value where you can kind of specify 24 00:01:32,910 --> 00:01:36,540 what resolution each one of those images is at. 25 00:01:36,540 --> 00:01:39,970 That seems to be like a little bit better of a solution to me 26 00:01:39,970 --> 00:01:42,630 than the JavaScript plugins that we've been talking about. 27 00:01:42,630 --> 00:01:47,050 I think it's really cool that they'll have it right in CSS rather than kind of a hacky stuff 28 00:01:47,050 --> 00:01:50,260 that we've been having to do with JavaScript; not to demean 29 00:01:50,260 --> 00:01:52,360 those plugins at all because they're wonderful. 30 00:01:52,360 --> 00:01:54,100 Yeah, I know, I totally agree. 31 00:01:54,100 --> 00:01:57,750 I mean going in and trying to detect with JavaScript seems a little bit messy, 32 00:01:57,750 --> 00:02:00,480 and it's nice to have a native built-in solution. 33 00:02:00,480 --> 00:02:05,270 Although we are probably going to have to deal with detection for a long time. >>For a little bit. 34 00:02:05,270 --> 00:02:09,449 Next up, we've talked about Twitter Bootstrap in the past on this show, 35 00:02:09,449 --> 00:02:13,480 and version 2.1.0 has just been released. 36 00:02:13,480 --> 00:02:18,520 New in this version of Twitter Bootstrap is new documentations, something called 37 00:02:18,520 --> 00:02:25,170 the "Affix Plugin" which is going to let a little side bar on your screen stay with you as you scroll. 38 00:02:25,170 --> 00:02:28,900 There's submenus on dropdowns, block buttons, 39 00:02:28,900 --> 00:02:32,910 new image styles, fluid grid offsets, a new navbar, 40 00:02:32,910 --> 00:02:38,290 and--this is pretty big--increased font size and line height. 41 00:02:38,290 --> 00:02:42,020 So if you're interested in Bootstrap or you currently have Bootstrap, 42 00:02:42,020 --> 00:02:44,170 go ahead and check it out and upgrade. 43 00:02:44,170 --> 00:02:47,540 Pretty cool stuff; now, speaking of Bootstrap, 44 00:02:47,540 --> 00:02:53,410 Dan Grossman has this really cool date range picker that's designed for, 45 00:02:53,410 --> 00:02:55,090 you guessed it, Twitter Bootstrap. 46 00:02:55,090 --> 00:03:01,800 Basically, he was working on Improvely and he needed this date range picker, 47 00:03:01,800 --> 00:03:04,170 So he went ahead and created one. 48 00:03:04,170 --> 00:03:08,610 You have reservation dates here as one example 49 00:03:08,610 --> 00:03:12,510 where you can kind go ahead and select a start date and an end date, 50 00:03:12,510 --> 00:03:15,310 and it will apply them in real time. That's pretty cool. 51 00:03:15,310 --> 00:03:22,250 And there's also predefined ranges, so you can pick things like today, yesterday, last seven days, 52 00:03:22,250 --> 00:03:25,800 and it will go ahead and update those in real time. 53 00:03:25,800 --> 00:03:33,180 Now, this does require jQuery or relies on jQuery, but that's not really a huge deal. 54 00:03:33,180 --> 00:03:35,910 I think lots of sites include jQuery these days. 55 00:03:35,910 --> 00:03:40,530 Yeah, something like 80% of the top websites include jQuery, 56 00:03:40,530 --> 00:03:44,620 and something like 90% of all the statistics I tell you are not true. 57 00:03:44,620 --> 00:03:50,350 Next up, you know what I really hate, Nick, is pressing buttons when I'm developing things, 58 00:03:50,350 --> 00:03:52,000 primarily the reload button. 59 00:03:52,000 --> 00:03:55,020 Isn't it such a drag to tap that or press Command-R? 60 00:03:55,020 --> 00:03:58,190 It is. >>Well, I have wonderful news for you. 61 00:03:58,190 --> 00:04:03,990 There is a new plugin kind of system called "Reload." 62 00:04:03,990 --> 00:04:08,100 So this uses Node.js and Grunt, and it works on Safari. 63 00:04:08,100 --> 00:04:11,380 What it does, it watches a certain directory for you, you tell what files to watch, 64 00:04:11,380 --> 00:04:15,340 and as soon as one of those files changes, you know CSS or JavaScript, 65 00:04:15,340 --> 00:04:18,000 it goes through and reloads your web browser for you. 66 00:04:18,000 --> 00:04:22,790 Boom, done. You can get back to the important stuff like browsing the Internet. 67 00:04:22,790 --> 00:04:25,370 Browsing Reddit, Facebook. >>Yeah. 68 00:04:25,370 --> 00:04:27,470 Et cetera. That's really important. >>Yeah. 69 00:04:27,470 --> 00:04:33,760 That's cool. I remember there are being similar features on lots of other frameworks and things, 70 00:04:33,760 --> 00:04:35,950 and like when you're working with SAS, 71 00:04:35,950 --> 00:04:40,800 you can go ahead and tell it to watch a directory or similar things like that, 72 00:04:40,800 --> 00:04:42,700 but this seems like a more generalized solution. 73 00:04:42,700 --> 00:04:46,440 So when your developing HTML and CSS, it can go ahead and do that for you. 74 00:04:46,440 --> 00:04:52,190 It's similar to a paid application called "LiveReload" which does the same thing SAS and CSS, 75 00:04:52,190 --> 00:04:56,730 and that one is actually pretty cool because if you modify CSS files in LiveReload, 76 00:04:56,730 --> 00:04:58,720 you don't even have to reload the page. 77 00:04:58,720 --> 00:05:00,210 That's why it's called "LiveReload." 78 00:05:00,210 --> 00:05:03,100 Wow. >>Yeah, fancy.->>Aptly named. 79 00:05:03,100 --> 00:05:08,690 Next up is BigVideo.js, and this is really cool. 80 00:05:08,690 --> 00:05:15,640 Basically, you can apply a background image to your website that is a giant video. 81 00:05:15,640 --> 00:05:23,060 It requires jQuery UI and actually several other things, 82 00:05:23,060 --> 00:05:25,750 Video.js API, in order for it to work, 83 00:05:25,750 --> 00:05:30,700 and in my opinion, I think it's more of a novelty than anything else. 84 00:05:30,700 --> 00:05:34,330 I don't really see a legitimate use for this. 85 00:05:34,330 --> 00:05:40,340 I think it's kind of--I don't know--I guess if you had a video that was really, really subtle, 86 00:05:40,340 --> 00:05:44,190 maybe like a galaxy with star background and had like-- 87 00:05:44,190 --> 00:05:48,440 Music video. >>Little twinkling lights. Probably not a music video. 88 00:05:48,440 --> 00:05:50,370 No, this would be awesome on my Myspace page. 89 00:05:50,370 --> 00:05:54,640 Yeah, definitely. >>Gigantic video of me in the background. 90 00:05:54,640 --> 00:06:01,160 Yeah, I don't see a legit use for this, but nonetheless, it is really, really cool. 91 00:06:01,160 --> 00:06:07,040 Next up, I'm just going to move on from there since we disagree pretty heavily on that. >>Yeah. 92 00:06:07,040 --> 00:06:12,720 There is an introduction for new programmers to JavaScript called "JavaScript for Cats." 93 00:06:12,720 --> 00:06:16,610 There's not really much to say about this, but it is a wonderful, 94 00:06:16,610 --> 00:06:20,970 wonderful and free introduction to the JavaScript programming languages, 95 00:06:20,970 --> 00:06:23,240 and it uses cats. 96 00:06:23,240 --> 00:06:27,110 So there's literally nothing not to like about this website. 97 00:06:27,110 --> 00:06:30,280 Go ahead if you've got somebody who is interested in learning JavaScript 98 00:06:30,280 --> 00:06:36,110 or if you want to learn JavaScript, take a look at jsforcats.com. 99 00:06:36,110 --> 00:06:41,630 Now, Jason, I can't think of anywhere else that I might go to learn JavaScript. 100 00:06:41,630 --> 00:06:45,200 Me neither. >>Maybe other than teamtreehouse.com. 101 00:06:45,200 --> 00:06:48,000 No, I don't think. I don't think that's a thing. 102 00:06:48,000 --> 00:06:53,440 Yeah, I think teamtreehouse.com is where you could learn JavaScript. 103 00:06:53,440 --> 00:06:55,440 Pretty sure you just made that up. >>Yup. 104 00:06:55,440 --> 00:07:01,990 Next up is Underscores which is a--it's not a WordPress theme. 105 00:07:01,990 --> 00:07:06,550 It's a starter theme or it's a way to create themes for WordPress. 106 00:07:06,550 --> 00:07:13,500 So basically you go to Underscores.me and you go ahead and type in the name of your theme. 107 00:07:13,500 --> 00:07:16,440 So I'll call mine maybe the-- >>Call it Jason. 108 00:07:16,440 --> 00:07:19,310 Treeshouse theme. Okay, I'll go ahead and call it Jason, 109 00:07:19,310 --> 00:07:23,580 and then you can go ahead and type in advance options such as your slug, 110 00:07:23,580 --> 00:07:29,020 the author, URI description, et cetera, and you hit generate. 111 00:07:29,020 --> 00:07:33,100 Now, this is not a WordPress theme like I said. 112 00:07:33,100 --> 00:07:40,420 It's just a starter theme, but it has lots of well commented HTML5 templates; 113 00:07:40,420 --> 00:07:45,640 it has a nice 404 template and lots of other cool CSS to go ahead 114 00:07:45,640 --> 00:07:49,520 and just get you started developing a WordPress theme. 115 00:07:49,520 --> 00:07:53,365 That's really great because it can be kind of tedious to start developing your own WordPress theme 116 00:07:53,365 --> 00:07:55,970 especially having to go and take a theme and modify it 117 00:07:55,970 --> 00:07:59,610 and get everything out of there that's already implemented. 118 00:07:59,610 --> 00:08:03,490 Absolutely. >>Next up, we have something called cdnjs.com. 119 00:08:03,490 --> 00:08:10,860 Cdnjs is a CDN or content delivery network for hosting JavaScript libraries. 120 00:08:10,860 --> 00:08:16,200 Google CDN and Microsoft CDN already host JavaScript libraries for you. 121 00:08:16,200 --> 00:08:21,780 What this one does is host some of the less popular libraries for using your application. 122 00:08:21,780 --> 00:08:25,650 There is a huge list of things that have a decent amount of followers 123 00:08:25,650 --> 00:08:28,200 and you'll probably be using in your apps. 124 00:08:28,200 --> 00:08:33,260 So, if you are using a CDN or if you're not using a CDN right now, 125 00:08:33,260 --> 00:08:36,000 go ahead and check out cdnjs.com. 126 00:08:36,000 --> 00:08:40,710 It's really easy to just throw that piece of JavaScript in the website and boom, done. 127 00:08:40,710 --> 00:08:44,420 Boom, done. >>Boom. >>Boom. >>Boom. 128 00:08:44,420 --> 00:08:49,260 Next up is JustGage at justgage.com. 129 00:08:49,260 --> 00:08:52,620 Gage is spelled G-A-G-E, 130 00:08:52,620 --> 00:08:57,380 and JustGage is basically a JavaScript plugin 131 00:08:57,380 --> 00:09:03,210 that allows you to create nice, animated, clean-looking gages. 132 00:09:03,210 --> 00:09:06,010 Now, we've seen this before, Jason. >>It's true. 133 00:09:06,010 --> 00:09:10,740 We've seen these gages appear elsewhere. We've covered them in the past on the show. 134 00:09:10,740 --> 00:09:12,490 Gages are pretty hot right now. 135 00:09:12,490 --> 00:09:19,210 They are, and we saw this new piece of JavaScript that allows you to create gages, 136 00:09:19,210 --> 00:09:24,690 and we started talking about what legitimate uses for gages might be. 137 00:09:24,690 --> 00:09:32,450 We couldn't readily think of any, but we did come up with one, maybe using the login process to websites. 138 00:09:32,450 --> 00:09:36,370 Start typing in your username, gage starts to spike up about 50%, 139 00:09:36,370 --> 00:09:39,260 type in password, 75%, sign in. 140 00:09:39,260 --> 00:09:41,110 Or maybe as you're scrolling down the page, 141 00:09:41,110 --> 00:09:43,780 the gage can tell you how close you are to the bottom. 142 00:09:43,780 --> 00:09:45,530 Or how fast you're scrolling. 143 00:09:45,530 --> 00:09:50,330 Ooh, yeah. That's a good one. It'd be like a scroll limit or speedmeter. 144 00:09:50,330 --> 00:09:52,400 Don't want to get scrolling speeding ticket. 145 00:09:52,400 --> 00:09:54,420 (Laughing) I hate those. >>Yeah. 146 00:09:54,420 --> 00:09:59,220 You could have the X and Y position of your mouse with gages. 147 00:09:59,220 --> 00:10:01,790 These are all legitimate uses. >>That might be really nice. 148 00:10:01,790 --> 00:10:05,930 Probably the best one, though, that we thought up was the gage that starts at 100% 149 00:10:05,930 --> 00:10:07,700 when you sign up for dating website 150 00:10:07,700 --> 00:10:11,550 and slowly goes down as you fill out your profile and upload pictures. 151 00:10:11,550 --> 00:10:16,080 Yeah, the more it learns about you, the-- >>The less it likes you. 152 00:10:16,080 --> 00:10:18,730 The less--the less it likes you. 153 00:10:18,730 --> 00:10:26,210 Actually, there is a lot of legitimate uses for gages, but I think they are very specific-use cases. 154 00:10:26,210 --> 00:10:29,360 Yeah, we're being a little bit harsh. >>One--(laughs) A little bit. 155 00:10:29,360 --> 00:10:33,870 One in particular that I really like is on the Google web fonts directory. 156 00:10:33,870 --> 00:10:38,040 When you go to pick a fonts and you click on "Quick Use," 157 00:10:38,040 --> 00:10:41,080 they have this really nice gage over on the right side 158 00:10:41,080 --> 00:10:45,490 that tells you how that font might impact your page load time. 159 00:10:45,490 --> 00:10:51,690 So, it's kind of nice. It's kind of, I guess, a different way of presenting quantitative information like that. 160 00:10:51,690 --> 00:10:54,760 Yeah, maybe download sizes as you assemble. >>Yeah. 161 00:10:54,760 --> 00:10:58,740 A custom JavaScript library or framework. >>Exactly. >>Things like that. 162 00:10:58,740 --> 00:11:01,580 So, Jason, what do we learn today? 163 00:11:01,580 --> 00:11:04,060 We learned that gages are awesome. 164 00:11:04,060 --> 00:11:09,680 And I think that I learned you can't do JavaScript without cats. 165 00:11:09,680 --> 00:11:12,870 Pretty useful information. >>Yeah, definitely. 166 00:11:12,870 --> 00:11:14,780 I think we all learned something here today. 167 00:11:14,780 --> 00:11:16,650 That is it for this week's episode. 168 00:11:16,650 --> 00:11:20,040 Please go ahead and follow us, I am @nickrp on Twitter. 169 00:11:20,040 --> 00:11:22,110 I'm @jseifer on Twitter. 170 00:11:22,110 --> 00:11:25,340 Thank you so much for joining us, and we will see you next week. 171 00:11:26,340 --> 00:11:28,360 [The Treehouse Show]