[Treehouse] [Jason Seifer] That's a nice computer you got there, Nick.

[Nick Pettit] Yeah, it's actually 1 of the new Retina MacBook Pros.

[Jason] Do you think that's made mine obsolete, this non-Retina MacBook Pro?

[Nick] Yeah, I think you should just, actually, just throw it in the trash.

[Jason] So what do you think of the display on that one? >> I really like it a lot.

The only thing I don't like about it is that I don't have 20/20 vision.

[LOL backwards] [Off-camera voice]

[?Music?]

[The Treehouse Show]

I'm Nick Pettit. >>I'm Jason Seifer. >>And you're watching the The Treehouse Show,

your weekly dose of Internet, where we talk about all things

web design, web development, and more.

This week we're going to be talking about a bunch of Retina stuff, some jQuery news,

and so let's just get right into it.

First up is Retina JS, at retinajs.com.

Basically, it's this piece of JavaScript that you can include in your website

and it will replace normal images with Retina images that you provide.

So basically, it'll go through your HTML, it will look for any images,

and then if you have Retina-sized images on your server, using the @2x convention,

it will go ahead and replace them. So there's actually really nothing that you need to do

other than include this JavaScript file, and then make sure that you have those

Retina images on your server, and it'll just automatically replace them.

It's pretty cool--it's a pretty cool way to make your website Retina-ready.

[Jason] Yeah. Really neat idea. A couple of interesting things

to note about the Retina JS project is it only makes these requests

and looks for these Retina images if you are on a Retina-enabled device,

you know, so your iPhone, iPad, or one of those fancy new MacBook Pros.

1 thing I'd like to see in a future version is maybe

adding a class to check for specific Retina images, or else it's going to be making

a lot of requests to the server just to see if 1 of these images exists.

But other than that, really cool library.

[Nick] Very cool stuff. >>Next up is this really interesting flowchart, speaking of Retinafying,

which is our word for the week: Retinafying.

Thomas [bleep] made this flowchart. >>Uh, Jason, I think it's actually Thomas Fuchs.

[Jason] Huh. Anyway, so Thomas made this flowchart, if you are interested

in Retinafying your website, goes through and shows the different kind of formats

that you have available for Retinafying.

For text you don't really need to do much of anything.

Canvas, there's actually a lot you need to do.

There's a whole video that you need to watch and then it even involves doing Magic,

then SVG, already done, then PNG, GIF and JPEG.

A couple of different processing stages you're going to have to do

to make these graphics Retina-ready.

[Nick] Maybe you can use Retina JS? >>Oh, good idea. We've come full circle. >>Boom.

[Jason] Finally, for favicons, or fave-icons? >>Fah, Fah-vee cons? >> Fave-i-con. >>Okay.

You just have to create a version that is twice as dense as the other one, 32 X 32, boom.

Good to go. How to Retinafy your website, by Thomas Fuchs.

[Nick] Very cool stuff. Moving on. So there's this really cool Photoshop plug-in

called CSS3 PS, >>CSS Threeps. >>Threeps? Okay, we'll go ahead and call it that.

And it's at CSS3 PS, or "CSS Threeps," dot com,

and basically, you just go ahead and download it and accept the license agreement.

You don't need to read that, though, and go ahead and install it in the Photoshop,

and then you can use Photoshop's shapes and turn them into CSS3,

which is really, really cool, especially when you're using more complex

gradients and borders and shadows and stuff like that.

It's just a really handy way to go ahead and turn those shapes into CSS3.

[Jason] I didn't know that you didn't have to read the entire license agreement every time.

[Nick] No, actually, you can actually just hit accept. >>Huh.

[Nick] And, you know, nobody's going to know the difference.

[Jason] Feel like I've wasted a lot of time in my life.

[Nick] That'll be a little secret that you keep to yourself.

[Jason laughing] So I think we have some updates in jQuery. >>Yup.

[Jason] What's going on? We've got version 1.8, 1.9, and 2.0. >>That's right.

[Jason] We're going to break down the mystery here.

[Nick] So 1.8 is the one that's coming up and basically they're going to introduce

a lot of modularity. You can go ahead and split up Ajax, CSS, FX,

and a whole bunch of other stuff, and just use them as you need them.

They're also going to introduce vender-prefixed CSS properties; so what does that mean?

Basically, if you're using Firefox or you're using Safari,

it will go ahead and use the proper vender prefix instead of using all of them.

So that's pretty cool. Sizzle is going to be the CSS selector engine.

Sizzle is an engine that John Resig went ahead and put together,

and it was designed to be easily-includable into any JavaScript library,

and now it's made its way into jQuery.

The last thing in 1.8 that's of note is jQuery.browser has now been deprecated,

so >>BOO! >>Instead of using that, to go ahead and do feature detection.

The jQuery team is recommending that you use Modernizr instead.

Now, a little further out on the horizon is jQuery 1.9 and 2.0.

And they're going to probably be released pretty close to one another, I think.

[Jason] Mm-hmm. Yeah. Version 1.9 and 2.0, they're going to actually support the same API.

1 of the big differences, though, is that version 1.9 is going to support oldIE,

and, of course, everyone knows what I'm talking about when I say "oldIE."

[Nick] I, actually, don't know what you're talking about.

Well, I do, but let's go ahead-- >>Oh, you tease, Nick. Yes.

[Nick] Let's go ahead and pause and talk about what oldIE, or old-I-E, actually means.

So we heard this term being used all over the Internet,

and Jason and I, in our extensive "research," >>We put on our Internet detective caps.

[Nick] That's right. We were seeing this term used everywhere,

and we were like, "What does oldIE, or old-I-E, mean?"

It's "old," capital I, capital E.

Basically, we finally stumbled across this tweet from Paul Irish,

and Paul Irish said, >>"I've been using the term 'old-I-E' or 'oldIE' lately to refer

to IE versions 6-8; IE9 doesn't deserve to be lumped in with them."

So basically oldIE refers to IE 6, 7 and 8.

But the main component of that is that it's browsers

that don't support HTML5 or media queries.

So what this is going to mean for you in terms of jQuery 1.9 and 2.0,

if you need to support those browsers, stick to 1.9.

If you are willing to move into the future with the rest of us,

go ahead, drop 2.0 into your site.

Don't just upgrade to 2.0 without testing that.

That's going to result in a lot of tears and sadness.

[Nick] You're going to have a bad time. >>You're going to have a bad time. Well done.

[Nick] So in--what is actually new in jQuery 1.9 and 2.0?

[Jason] Oh, well, jQuery 2.0 is where the new features are going to be.

By dropping support for those older browsers, we can move forward as a web community.

It's also going to be smaller and faster since it has less codebases to support.

[Nick] That's awesome. But they're still going to support the same APIs,

but pretty soon they'll probably be-- >>Yeah. they're going to-- >>divergent.

[Jason] Good word. >>Yeah. All right. >>Now, I don't know if it's

as good as "Retinafy," but I like it. >>Yeah, I don't know. Retinafy is pretty awesome.

Moving on. We're going to talk about a couple of tips in Sublime Text 2.

[Jason] Yeah. If you are new or an old hat to coding,

you're going to be best friends with a text editor, and it's worth it

to get to know your text editor a little bit while you're learning to code.

There is a great blog post called

"Some things beginners might not know about Sublime Text 2."

This goes through and has just a bunch of tips that you should really learn

as you're going through and learning to code.

One thing I'm just going to quickly demonstrate here: This is the Bootstrap Project.

If you hold command and press T, get a little drop-down on the top right with file names.

You can then start typing part of a file name.

So if I wanted to open Bootstrap JS, I can type "boot JS," press enter,

completes it, file opens right up in the browser.

Now, the web page has a ton of tips that you can work your way through.

I recommmend doing about 1 per day to really integrate it into your workflow.

That is how you get to be really good at a text editor.

Once again, worth learning, because it'll save you a lot of time in the long run.

[Nick] I'm going to go ahead and memorize every single 1 of these tips,

because I know there's going to be a quiz next week.

[Jason] That is true. I don't know who told you there was going to be a pop quiz,

but they are in for, in for a surprise. >>All right.

Well, that's pretty much our show. Jason, how do you think we did?

[Jason] Uh, 10 out of 10, if I had to put a number to it. How about you?

[Nick] Yeah, maybe we should actually ask our studio audience.

[Jason] Our live studio audience. What did you think? How'd we do?

[2]

[Nick] All right. So they give us-- >>NIce! >>about a 2? >>Yeah.

[Nick] I'm going to stay that's because it's our second episode,

and not say that it's 2 out of 10, or 2 out of 20, or 2 out of 100.

Yeah, it's probably just that it's our second episode.

[Jason] I'm crying myself to sleep either way. >>All right.

[Jason] Thanks so much for joining us, and we will see you next week. >>See you later.

[?Music?]

[Treehouse™]