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