Episode 2: Retinafy Your Website

[Treehouse] [Jason Seifer] That's a nice computer you got there, Nick. 0:00 [Nick Pettit] Yeah, it's actually 1 of the new Retina MacBook Pros. 0:02 [Jason] Do you think that's made mine obsolete, this non-Retina MacBook Pro? 0:06 [Nick] Yeah, I think you should just, actually, just throw it in the trash. 0:09 [Jason] So what do you think of the display on that one? >> I really like it a lot. 0:11 The only thing I don't like about it is that I don't have 20/20 vision. 0:13 [LOL backwards] [Off-camera voice] 0:18 [?Music?] 0:21 [The Treehouse Show] 0:24 I'm Nick Pettit. >>I'm Jason Seifer. >>And you're watching the The Treehouse Show, 0:26 your weekly dose of Internet, where we talk about all things 0:29 web design, web development, and more. 0:32 This week we're going to be talking about a bunch of Retina stuff, some jQuery news, 0:35 and so let's just get right into it. 0:39 First up is Retina JS, at retinajs.com. 0:41 Basically, it's this piece of JavaScript that you can include in your website 0:46 and it will replace normal images with Retina images that you provide. 0:50 So basically, it'll go through your HTML, it will look for any images, 0:55 and then if you have Retina-sized images on your server, using the @2x convention, 0:59 it will go ahead and replace them. So there's actually really nothing that you need to do 1:06 other than include this JavaScript file, and then make sure that you have those 1:09 Retina images on your server, and it'll just automatically replace them. 1:14 It's pretty cool--it's a pretty cool way to make your website Retina-ready. 1:18 [Jason] Yeah. Really neat idea. A couple of interesting things 1:22 to note about the Retina JS project is it only makes these requests 1:25 and looks for these Retina images if you are on a Retina-enabled device, 1:29 you know, so your iPhone, iPad, or one of those fancy new MacBook Pros. 1:33 1 thing I'd like to see in a future version is maybe 1:39 adding a class to check for specific Retina images, or else it's going to be making 1:41 a lot of requests to the server just to see if 1 of these images exists. 1:45 But other than that, really cool library. 1:50 [Nick] Very cool stuff. >>Next up is this really interesting flowchart, speaking of Retinafying, 1:53 which is our word for the week: Retinafying. 2:00 Thomas [bleep] made this flowchart. >>Uh, Jason, I think it's actually Thomas Fuchs. 2:02 [Jason] Huh. Anyway, so Thomas made this flowchart, if you are interested 2:07 in Retinafying your website, goes through and shows the different kind of formats 2:12 that you have available for Retinafying. 2:17 For text you don't really need to do much of anything. 2:19 Canvas, there's actually a lot you need to do. 2:21 There's a whole video that you need to watch and then it even involves doing Magic, 2:24 then SVG, already done, then PNG, GIF and JPEG. 2:29 A couple of different processing stages you're going to have to do 2:33 to make these graphics Retina-ready. 2:36 [Nick] Maybe you can use Retina JS? >>Oh, good idea. We've come full circle. >>Boom. 2:39 [Jason] Finally, for favicons, or fave-icons? >>Fah, Fah-vee cons? >> Fave-i-con. >>Okay. 2:43 You just have to create a version that is twice as dense as the other one, 32 X 32, boom. 2:50 Good to go. How to Retinafy your website, by Thomas Fuchs. 2:56 [Nick] Very cool stuff. Moving on. So there's this really cool Photoshop plug-in 3:01 called CSS3 PS, >>CSS Threeps. >>Threeps? Okay, we'll go ahead and call it that. 3:06 And it's at CSS3 PS, or "CSS Threeps," dot com, 3:12 and basically, you just go ahead and download it and accept the license agreement. 3:18 You don't need to read that, though, and go ahead and install it in the Photoshop, 3:23 and then you can use Photoshop's shapes and turn them into CSS3, 3:27 which is really, really cool, especially when you're using more complex 3:34 gradients and borders and shadows and stuff like that. 3:38 It's just a really handy way to go ahead and turn those shapes into CSS3. 3:42 [Jason] I didn't know that you didn't have to read the entire license agreement every time. 3:48 [Nick] No, actually, you can actually just hit accept. >>Huh. 3:50 [Nick] And, you know, nobody's going to know the difference. 3:55 [Jason] Feel like I've wasted a lot of time in my life. 3:57 [Nick] That'll be a little secret that you keep to yourself. 3:59 [Jason laughing] So I think we have some updates in jQuery. >>Yup. 4:02 [Jason] What's going on? We've got version 1.8, 1.9, and 2.0. >>That's right. 4:05 [Jason] We're going to break down the mystery here. 4:09 [Nick] So 1.8 is the one that's coming up and basically they're going to introduce 4:11 a lot of modularity. You can go ahead and split up Ajax, CSS, FX, 4:17 and a whole bunch of other stuff, and just use them as you need them. 4:22 They're also going to introduce vender-prefixed CSS properties; so what does that mean? 4:26 Basically, if you're using Firefox or you're using Safari, 4:31 it will go ahead and use the proper vender prefix instead of using all of them. 4:35 So that's pretty cool. Sizzle is going to be the CSS selector engine. 4:39 Sizzle is an engine that John Resig went ahead and put together, 4:44 and it was designed to be easily-includable into any JavaScript library, 4:47 and now it's made its way into jQuery. 4:53 The last thing in 1.8 that's of note is jQuery.browser has now been deprecated, 4:56 so >>BOO! >>Instead of using that, to go ahead and do feature detection. 5:03 The jQuery team is recommending that you use Modernizr instead. 5:08 Now, a little further out on the horizon is jQuery 1.9 and 2.0. 5:11 And they're going to probably be released pretty close to one another, I think. 5:17 [Jason] Mm-hmm. Yeah. Version 1.9 and 2.0, they're going to actually support the same API. 5:20 1 of the big differences, though, is that version 1.9 is going to support oldIE, 5:26 and, of course, everyone knows what I'm talking about when I say "oldIE." 5:31 [Nick] I, actually, don't know what you're talking about. 5:34 Well, I do, but let's go ahead-- >>Oh, you tease, Nick. Yes. 5:37 [Nick] Let's go ahead and pause and talk about what oldIE, or old-I-E, actually means. 5:39 So we heard this term being used all over the Internet, 5:44 and Jason and I, in our extensive "research," >>We put on our Internet detective caps. 5:47 [Nick] That's right. We were seeing this term used everywhere, 5:53 and we were like, "What does oldIE, or old-I-E, mean?" 5:56 It's "old," capital I, capital E. 6:00 Basically, we finally stumbled across this tweet from Paul Irish, 6:03 and Paul Irish said, >>"I've been using the term 'old-I-E' or 'oldIE' lately to refer 6:08 to IE versions 6-8; IE9 doesn't deserve to be lumped in with them." 6:17 So basically oldIE refers to IE 6, 7 and 8. 6:23 But the main component of that is that it's browsers 6:27 that don't support HTML5 or media queries. 6:29 So what this is going to mean for you in terms of jQuery 1.9 and 2.0, 6:33 if you need to support those browsers, stick to 1.9. 6:38 If you are willing to move into the future with the rest of us, 6:42 go ahead, drop 2.0 into your site. 6:45 Don't just upgrade to 2.0 without testing that. 6:47 That's going to result in a lot of tears and sadness. 6:50 [Nick] You're going to have a bad time. >>You're going to have a bad time. Well done. 6:54 [Nick] So in--what is actually new in jQuery 1.9 and 2.0? 6:57 [Jason] Oh, well, jQuery 2.0 is where the new features are going to be. 7:02 By dropping support for those older browsers, we can move forward as a web community. 7:06 It's also going to be smaller and faster since it has less codebases to support. 7:12 [Nick] That's awesome. But they're still going to support the same APIs, 7:16 but pretty soon they'll probably be-- >>Yeah. they're going to-- >>divergent. 7:19 [Jason] Good word. >>Yeah. All right. >>Now, I don't know if it's 7:23 as good as "Retinafy," but I like it. >>Yeah, I don't know. Retinafy is pretty awesome. 7:25 Moving on. We're going to talk about a couple of tips in Sublime Text 2. 7:31 [Jason] Yeah. If you are new or an old hat to coding, 7:37 you're going to be best friends with a text editor, and it's worth it 7:41 to get to know your text editor a little bit while you're learning to code. 7:45 There is a great blog post called 7:49 "Some things beginners might not know about Sublime Text 2." 7:51 This goes through and has just a bunch of tips that you should really learn 7:56 as you're going through and learning to code. 8:00 One thing I'm just going to quickly demonstrate here: This is the Bootstrap Project. 8:02 If you hold command and press T, get a little drop-down on the top right with file names. 8:07 You can then start typing part of a file name. 8:12 So if I wanted to open Bootstrap JS, I can type "boot JS," press enter, 8:14 completes it, file opens right up in the browser. 8:19 Now, the web page has a ton of tips that you can work your way through. 8:23 I recommmend doing about 1 per day to really integrate it into your workflow. 8:27 That is how you get to be really good at a text editor. 8:32 Once again, worth learning, because it'll save you a lot of time in the long run. 8:35 [Nick] I'm going to go ahead and memorize every single 1 of these tips, 8:40 because I know there's going to be a quiz next week. 8:43 [Jason] That is true. I don't know who told you there was going to be a pop quiz, 8:46 but they are in for, in for a surprise. >>All right. 8:50 Well, that's pretty much our show. Jason, how do you think we did? 8:54 [Jason] Uh, 10 out of 10, if I had to put a number to it. How about you? 8:58 [Nick] Yeah, maybe we should actually ask our studio audience. 9:01 [Jason] Our live studio audience. What did you think? How'd we do? 9:03 [2] 9:06 [Nick] All right. So they give us-- >>NIce! >>about a 2? >>Yeah. 9:09 [Nick] I'm going to stay that's because it's our second episode, 9:13 and not say that it's 2 out of 10, or 2 out of 20, or 2 out of 100. 9:16 Yeah, it's probably just that it's our second episode. 9:22 [Jason] I'm crying myself to sleep either way. >>All right. 9:24 [Jason] Thanks so much for joining us, and we will see you next week. >>See you later. 9:26 [?Music?] 9:31 [Treehouse™] 9:34