1 00:00:00,000 --> 00:00:02,690 [Treehouse] [Jason Seifer] That's a nice computer you got there, Nick. 2 00:00:02,690 --> 00:00:06,230 [Nick Pettit] Yeah, it's actually 1 of the new Retina MacBook Pros. 3 00:00:06,230 --> 00:00:09,030 [Jason] Do you think that's made mine obsolete, this non-Retina MacBook Pro? 4 00:00:09,030 --> 00:00:11,030 [Nick] Yeah, I think you should just, actually, just throw it in the trash. 5 00:00:11,030 --> 00:00:13,430 [Jason] So what do you think of the display on that one? >> I really like it a lot. 6 00:00:13,430 --> 00:00:18,010 The only thing I don't like about it is that I don't have 20/20 vision. 7 00:00:18,010 --> 00:00:21,490 [LOL backwards] [Off-camera voice] 8 00:00:21,490 --> 00:00:24,670 [?Music?] 9 00:00:24,670 --> 00:00:26,700 [The Treehouse Show] 10 00:00:26,700 --> 00:00:29,730 I'm Nick Pettit. >>I'm Jason Seifer. >>And you're watching the The Treehouse Show, 11 00:00:29,730 --> 00:00:32,570 your weekly dose of Internet, where we talk about all things 12 00:00:32,570 --> 00:00:35,300 web design, web development, and more. 13 00:00:35,300 --> 00:00:39,480 This week we're going to be talking about a bunch of Retina stuff, some jQuery news, 14 00:00:39,480 --> 00:00:41,490 and so let's just get right into it. 15 00:00:41,490 --> 00:00:46,120 First up is Retina JS, at retinajs.com. 16 00:00:46,120 --> 00:00:50,300 Basically, it's this piece of JavaScript that you can include in your website 17 00:00:50,300 --> 00:00:55,150 and it will replace normal images with Retina images that you provide. 18 00:00:55,150 --> 00:00:59,790 So basically, it'll go through your HTML, it will look for any images, 19 00:00:59,790 --> 00:01:06,220 and then if you have Retina-sized images on your server, using the @2x convention, 20 00:01:06,220 --> 00:01:09,950 it will go ahead and replace them. So there's actually really nothing that you need to do 21 00:01:09,950 --> 00:01:14,620 other than include this JavaScript file, and then make sure that you have those 22 00:01:14,620 --> 00:01:18,700 Retina images on your server, and it'll just automatically replace them. 23 00:01:18,700 --> 00:01:22,520 It's pretty cool--it's a pretty cool way to make your website Retina-ready. 24 00:01:22,520 --> 00:01:25,180 [Jason] Yeah. Really neat idea. A couple of interesting things 25 00:01:25,180 --> 00:01:29,370 to note about the Retina JS project is it only makes these requests 26 00:01:29,370 --> 00:01:33,890 and looks for these Retina images if you are on a Retina-enabled device, 27 00:01:33,890 --> 00:01:39,170 you know, so your iPhone, iPad, or one of those fancy new MacBook Pros. 28 00:01:39,170 --> 00:01:41,890 1 thing I'd like to see in a future version is maybe 29 00:01:41,890 --> 00:01:45,950 adding a class to check for specific Retina images, or else it's going to be making 30 00:01:45,950 --> 00:01:50,920 a lot of requests to the server just to see if 1 of these images exists. 31 00:01:50,920 --> 00:01:53,330 But other than that, really cool library. 32 00:01:53,330 --> 00:02:00,110 [Nick] Very cool stuff. >>Next up is this really interesting flowchart, speaking of Retinafying, 33 00:02:00,110 --> 00:02:02,990 which is our word for the week: Retinafying. 34 00:02:02,990 --> 00:02:07,350 Thomas [bleep] made this flowchart. >>Uh, Jason, I think it's actually Thomas Fuchs. 35 00:02:07,350 --> 00:02:12,770 [Jason] Huh. Anyway, so Thomas made this flowchart, if you are interested 36 00:02:12,770 --> 00:02:17,210 in Retinafying your website, goes through and shows the different kind of formats 37 00:02:17,210 --> 00:02:19,350 that you have available for Retinafying. 38 00:02:19,350 --> 00:02:21,510 For text you don't really need to do much of anything. 39 00:02:21,510 --> 00:02:24,210 Canvas, there's actually a lot you need to do. 40 00:02:24,210 --> 00:02:29,180 There's a whole video that you need to watch and then it even involves doing Magic, 41 00:02:29,180 --> 00:02:33,450 then SVG, already done, then PNG, GIF and JPEG. 42 00:02:33,450 --> 00:02:36,590 A couple of different processing stages you're going to have to do 43 00:02:36,590 --> 00:02:39,590 to make these graphics Retina-ready. 44 00:02:39,590 --> 00:02:43,290 [Nick] Maybe you can use Retina JS? >>Oh, good idea. We've come full circle. >>Boom. 45 00:02:43,290 --> 00:02:50,690 [Jason] Finally, for favicons, or fave-icons? >>Fah, Fah-vee cons? >> Fave-i-con. >>Okay. 46 00:02:50,690 --> 00:02:56,410 You just have to create a version that is twice as dense as the other one, 32 X 32, boom. 47 00:02:56,410 --> 00:03:01,730 Good to go. How to Retinafy your website, by Thomas Fuchs. 48 00:03:01,730 --> 00:03:06,840 [Nick] Very cool stuff. Moving on. So there's this really cool Photoshop plug-in 49 00:03:06,840 --> 00:03:12,520 called CSS3 PS, >>CSS Threeps. >>Threeps? Okay, we'll go ahead and call it that. 50 00:03:12,520 --> 00:03:18,660 And it's at CSS3 PS, or "CSS Threeps," dot com, 51 00:03:18,660 --> 00:03:23,680 and basically, you just go ahead and download it and accept the license agreement. 52 00:03:23,680 --> 00:03:27,990 You don't need to read that, though, and go ahead and install it in the Photoshop, 53 00:03:27,990 --> 00:03:34,170 and then you can use Photoshop's shapes and turn them into CSS3, 54 00:03:34,170 --> 00:03:38,400 which is really, really cool, especially when you're using more complex 55 00:03:38,400 --> 00:03:42,210 gradients and borders and shadows and stuff like that. 56 00:03:42,210 --> 00:03:48,200 It's just a really handy way to go ahead and turn those shapes into CSS3. 57 00:03:48,200 --> 00:03:50,980 [Jason] I didn't know that you didn't have to read the entire license agreement every time. 58 00:03:50,980 --> 00:03:55,000 [Nick] No, actually, you can actually just hit accept. >>Huh. 59 00:03:55,000 --> 00:03:57,410 [Nick] And, you know, nobody's going to know the difference. 60 00:03:57,410 --> 00:03:59,540 [Jason] Feel like I've wasted a lot of time in my life. 61 00:03:59,540 --> 00:04:02,250 [Nick] That'll be a little secret that you keep to yourself. 62 00:04:02,250 --> 00:04:05,640 [Jason laughing] So I think we have some updates in jQuery. >>Yup. 63 00:04:05,640 --> 00:04:09,290 [Jason] What's going on? We've got version 1.8, 1.9, and 2.0. >>That's right. 64 00:04:09,290 --> 00:04:11,290 [Jason] We're going to break down the mystery here. 65 00:04:11,290 --> 00:04:17,200 [Nick] So 1.8 is the one that's coming up and basically they're going to introduce 66 00:04:17,200 --> 00:04:22,340 a lot of modularity. You can go ahead and split up Ajax, CSS, FX, 67 00:04:22,340 --> 00:04:26,230 and a whole bunch of other stuff, and just use them as you need them. 68 00:04:26,230 --> 00:04:31,070 They're also going to introduce vender-prefixed CSS properties; so what does that mean? 69 00:04:31,070 --> 00:04:35,210 Basically, if you're using Firefox or you're using Safari, 70 00:04:35,210 --> 00:04:39,950 it will go ahead and use the proper vender prefix instead of using all of them. 71 00:04:39,950 --> 00:04:44,370 So that's pretty cool. Sizzle is going to be the CSS selector engine. 72 00:04:44,370 --> 00:04:47,600 Sizzle is an engine that John Resig went ahead and put together, 73 00:04:47,600 --> 00:04:53,710 and it was designed to be easily-includable into any JavaScript library, 74 00:04:53,710 --> 00:04:56,530 and now it's made its way into jQuery. 75 00:04:56,530 --> 00:05:03,090 The last thing in 1.8 that's of note is jQuery.browser has now been deprecated, 76 00:05:03,090 --> 00:05:08,040 so >>BOO! >>Instead of using that, to go ahead and do feature detection. 77 00:05:08,040 --> 00:05:11,570 The jQuery team is recommending that you use Modernizr instead. 78 00:05:11,570 --> 00:05:17,580 Now, a little further out on the horizon is jQuery 1.9 and 2.0. 79 00:05:17,580 --> 00:05:20,980 And they're going to probably be released pretty close to one another, I think. 80 00:05:20,980 --> 00:05:26,250 [Jason] Mm-hmm. Yeah. Version 1.9 and 2.0, they're going to actually support the same API. 81 00:05:26,250 --> 00:05:31,530 1 of the big differences, though, is that version 1.9 is going to support oldIE, 82 00:05:31,530 --> 00:05:34,710 and, of course, everyone knows what I'm talking about when I say "oldIE." 83 00:05:34,710 --> 00:05:37,180 [Nick] I, actually, don't know what you're talking about. 84 00:05:37,180 --> 00:05:39,450 Well, I do, but let's go ahead-- >>Oh, you tease, Nick. Yes. 85 00:05:39,450 --> 00:05:44,210 [Nick] Let's go ahead and pause and talk about what oldIE, or old-I-E, actually means. 86 00:05:44,210 --> 00:05:47,750 So we heard this term being used all over the Internet, 87 00:05:47,750 --> 00:05:53,170 and Jason and I, in our extensive "research," >>We put on our Internet detective caps. 88 00:05:53,170 --> 00:05:56,740 [Nick] That's right. We were seeing this term used everywhere, 89 00:05:56,740 --> 00:06:00,750 and we were like, "What does oldIE, or old-I-E, mean?" 90 00:06:00,750 --> 00:06:03,610 It's "old," capital I, capital E. 91 00:06:03,610 --> 00:06:08,730 Basically, we finally stumbled across this tweet from Paul Irish, 92 00:06:08,730 --> 00:06:17,150 and Paul Irish said, >>"I've been using the term 'old-I-E' or 'oldIE' lately to refer 93 00:06:17,150 --> 00:06:23,050 to IE versions 6-8; IE9 doesn't deserve to be lumped in with them." 94 00:06:23,050 --> 00:06:27,450 So basically oldIE refers to IE 6, 7 and 8. 95 00:06:27,450 --> 00:06:29,860 But the main component of that is that it's browsers 96 00:06:29,860 --> 00:06:33,780 that don't support HTML5 or media queries. 97 00:06:33,780 --> 00:06:38,890 So what this is going to mean for you in terms of jQuery 1.9 and 2.0, 98 00:06:38,890 --> 00:06:42,060 if you need to support those browsers, stick to 1.9. 99 00:06:42,060 --> 00:06:45,360 If you are willing to move into the future with the rest of us, 100 00:06:45,360 --> 00:06:47,870 go ahead, drop 2.0 into your site. 101 00:06:47,870 --> 00:06:50,650 Don't just upgrade to 2.0 without testing that. 102 00:06:50,650 --> 00:06:54,260 That's going to result in a lot of tears and sadness. 103 00:06:54,260 --> 00:06:57,160 [Nick] You're going to have a bad time. >>You're going to have a bad time. Well done. 104 00:06:57,160 --> 00:07:02,080 [Nick] So in--what is actually new in jQuery 1.9 and 2.0? 105 00:07:02,080 --> 00:07:06,900 [Jason] Oh, well, jQuery 2.0 is where the new features are going to be. 106 00:07:06,900 --> 00:07:12,140 By dropping support for those older browsers, we can move forward as a web community. 107 00:07:12,140 --> 00:07:16,100 It's also going to be smaller and faster since it has less codebases to support. 108 00:07:16,100 --> 00:07:19,390 [Nick] That's awesome. But they're still going to support the same APIs, 109 00:07:19,390 --> 00:07:23,090 but pretty soon they'll probably be-- >>Yeah. they're going to-- >>divergent. 110 00:07:23,090 --> 00:07:25,870 [Jason] Good word. >>Yeah. All right. >>Now, I don't know if it's 111 00:07:25,870 --> 00:07:31,560 as good as "Retinafy," but I like it. >>Yeah, I don't know. Retinafy is pretty awesome. 112 00:07:31,560 --> 00:07:37,160 Moving on. We're going to talk about a couple of tips in Sublime Text 2. 113 00:07:37,160 --> 00:07:41,570 [Jason] Yeah. If you are new or an old hat to coding, 114 00:07:41,570 --> 00:07:45,280 you're going to be best friends with a text editor, and it's worth it 115 00:07:45,280 --> 00:07:49,610 to get to know your text editor a little bit while you're learning to code. 116 00:07:49,610 --> 00:07:51,950 There is a great blog post called 117 00:07:51,950 --> 00:07:56,310 "Some things beginners might not know about Sublime Text 2." 118 00:07:56,310 --> 00:08:00,380 This goes through and has just a bunch of tips that you should really learn 119 00:08:00,380 --> 00:08:02,400 as you're going through and learning to code. 120 00:08:02,400 --> 00:08:07,060 One thing I'm just going to quickly demonstrate here: This is the Bootstrap Project. 121 00:08:07,060 --> 00:08:12,530 If you hold command and press T, get a little drop-down on the top right with file names. 122 00:08:12,530 --> 00:08:14,990 You can then start typing part of a file name. 123 00:08:14,990 --> 00:08:19,450 So if I wanted to open Bootstrap JS, I can type "boot JS," press enter, 124 00:08:19,450 --> 00:08:23,620 completes it, file opens right up in the browser. 125 00:08:23,620 --> 00:08:27,800 Now, the web page has a ton of tips that you can work your way through. 126 00:08:27,800 --> 00:08:32,789 I recommmend doing about 1 per day to really integrate it into your workflow. 127 00:08:32,789 --> 00:08:35,880 That is how you get to be really good at a text editor. 128 00:08:35,880 --> 00:08:40,280 Once again, worth learning, because it'll save you a lot of time in the long run. 129 00:08:40,280 --> 00:08:43,750 [Nick] I'm going to go ahead and memorize every single 1 of these tips, 130 00:08:43,750 --> 00:08:46,230 because I know there's going to be a quiz next week. 131 00:08:46,230 --> 00:08:50,380 [Jason] That is true. I don't know who told you there was going to be a pop quiz, 132 00:08:50,380 --> 00:08:54,370 but they are in for, in for a surprise. >>All right. 133 00:08:54,370 --> 00:08:58,320 Well, that's pretty much our show. Jason, how do you think we did? 134 00:08:58,320 --> 00:09:01,610 [Jason] Uh, 10 out of 10, if I had to put a number to it. How about you? 135 00:09:01,610 --> 00:09:03,870 [Nick] Yeah, maybe we should actually ask our studio audience. 136 00:09:03,870 --> 00:09:06,380 [Jason] Our live studio audience. What did you think? How'd we do? 137 00:09:06,380 --> 00:09:09,730 [2] 138 00:09:09,730 --> 00:09:13,010 [Nick] All right. So they give us-- >>NIce! >>about a 2? >>Yeah. 139 00:09:13,010 --> 00:09:16,270 [Nick] I'm going to stay that's because it's our second episode, 140 00:09:16,270 --> 00:09:22,210 and not say that it's 2 out of 10, or 2 out of 20, or 2 out of 100. 141 00:09:22,210 --> 00:09:24,540 Yeah, it's probably just that it's our second episode. 142 00:09:24,540 --> 00:09:26,620 [Jason] I'm crying myself to sleep either way. >>All right. 143 00:09:26,620 --> 00:09:31,430 [Jason] Thanks so much for joining us, and we will see you next week. >>See you later. 144 00:09:31,430 --> 00:09:34,890 [?Music?] 145 00:09:34,890 --> 00:09:37,000 [Treehouse™]