[The Treehouse Show]

Hi, I'm Nick Pettit. >>I'm Jason Seifer.

[Pettit] And you're watching The Treehouse Show, your weekly dose of Internet,

where we talk about all things web design, web development, and more.

[Seifer] In this episode, we'll be talking about responsive image techniques,

controlling and customizing your development environment, and more.

[Pettit] Let's check it out!

[The Treehouse Show]

First up is adaptive images, available at adaptive-images.com.

On the show, I feel like we've talked about responsive web design

every single episode, but it's because it's important.

And adaptive images makes it even easier.

Basically, when a visitor comes to your website,

it will detect the screen size, automatically create a rescaled image,

and then cache it so that when the next visitor comes by,

that image will be ready to go.

It uses a PHP script and hooks into Apache,

and it's actually pretty clever in its implementation.

But the bottom line is, it will create smaller images

that are more appropriately scaled in terms of their file size to smaller mobile devices.

[Seifer] So this is going to save time, say, if you're on an iPhone or a mobile device.

You're going to get a smaller image and thus the page is going to load quicker,

which is good for everybody, I think, in that scenario, right?

[Pettit] Exactly. And as it says on the site,

your site is being viewed by increasingly smaller, slower,

and low bandwidth devices.

[Seifer] That's good news. >>Yeah. That's great.

[Seifer] Awesome. >>All right.

[Seifer] So along those lines, and completely not along those lines,

next up is Snappy Dashboards with Redis.

Now, Nick, you've probably seen applications where you log into the app

and it has a dashboard overview of what's going on,

maybe how many clicks were someplace, or a bar graph of what's going on. >>Exactly.

[Seifer] Well, it can occasionally be very cumbersome

to get at that data if you're using a relational database.

This could take a lot of different queries to see the proper information,

and it can wind up becoming a little bit expensive.

[Pettit] Because you have to pull together all these various pieces of information.

[Seifer] Yeah. You have to assemble a whole bunch.

So there's an interesting blog post called "Snappy Dashboards with Redis."

Now, this talks about using Redis, which is one of these

newfangled, NoSQL databases. >>Whoa. >>I know.

A lot of words there. A lot of words.

But what Redis does is, essentially, it's like a glorified key value store that's persistent.

So the technique that they use in this post is concatenating

all your different statistics with certain Redis keys

that are going to be a lot quicker to increment and decrement.

This way, when you want to create a dashboard,

you only have to do a limited amount of querying

from Redis rather than your database.

This is going to result in a lot quicker page use for your users.

The blog post has more specific techniques on how they wound up doing this,

and the different keys that they wound up using,

and even some sample Ruby code in order to do this.

This is definitely something that you're going to want to

read the show notes for for more information,

and you can find the show notes on our YouTube channel

at youtube.com/gotreehouse.

[Pettit] All right. Go treehouse. So next up,

we're going to talk about how to create a responsive SVG.

[Seifer] Now, is it true that people are pronounicing SVG as "savage?"

[Pettit] No. I think that's actually just you, Jason.

[Seifer] Thought I read that somewhere. >>Nope.

You just made that up. All right.

Actually, we're not going to tell you how to do it, we're going to direct you

to this really great blog post that tells you exactly how to do it.

And actually, it's very simple.

It's very simple to creating a fluid image.

Basically, you would create your vector image in Illustrator,

and you want to go ahead and export it as an SVG.

I am kind of glossing over this a little bit,

but ultimately, you'll end up with some HTML that is your SVG,

and you can put that into your HTML document, I should say.

Then, in your CSS, you can go ahead and set the width to 100%.

That's very similar to what you would do for images in a responsive website.

What this is going to do is it's going to cause the SVG

to take up the full width of its parent element,

and that way, if you're resizing the browser in a fluid layout,

it will go ahead and just continue to expand or contract proportionally.

Pretty nifty, and again, it's very similar to fluid images,

but it's something that, I don't know, I wouldn't have known that had I not read it.

[Seifer] I'm pretty sure it's pronounced "savages."

[Pettit] I think you're right, Jason. I'll let you go on thinking that.

[Seifer] Thanks. Next up is our app review.

[Pettit] Let's check it out.

[App Review]

[Seifer] Our app review this week is an app called Shortcat.

[Pettit] And that has nothing to do with Longcat. >>Except it's the opposite. >>Got it.

[Seifer] Shortcat is a very interesting application for OS X.

And this is going to give you the ability to interface with GUI elements using the keyboard.

Now, I know that's a little bit strange to say,

but you get a command prompt, and--yeah, here we go.

Cut to it. You'll notice this little video they have on the site in system preferences.

[Pettit] I only notice the really cute cat.

[Seifer]. Yeah, look at that. Look at that cat.

It's got a little computer mouse hanging from its mouth.

[Pettit] That's crazy. >>I know.

So the example that they give is in system preferences,

and if you wanted to go to the network preference,

you do the Shortcat shortcut, and press the letter 'n' for network.

Then you can completely navigate around the OS X GUI using Shortcat.

What I found that's really interesting is it works with Chrome as well.

So let me see if I can get my navigation bar up here

So I launch Shortcat with command + shift + space.

You see the little cat eyes come up on the bottom of the screen,

and if I wanted to access the Chrome menu, I could type 'c,'

and you can see in the top right corner of the screen it gets highlighted in green,

press enter, and it shows you what's going on.

[Pettit] Huh. That's pretty cool. >>Really, really good app.

Saves a lot of time.

Well, you know. Gives you a lot of shortcuts with Shortcat.

[Pettit] And, you know, shortcuts are actually one of those interesting things

that, they never seem like they're going to save a lot of time,

but actually moving your mouse around the screen, as lazy as this sounds,

it does take a lot of time to click on small, little buttons.

So anything that you can do with the keyboard is probably going to speed up your workflow.

In fact, Jason introduced me to Gmail shortcuts in 2012.

[Seifer] I don't know how you lived. >>I didn't, Jason. Not until now.

[Seifer] You weren't really living. >>Exactly.

So next up is Enquire.js, which is available at this really long URL

which will be in the lower third.

Basically, Enquire.js is a way for you to include media queries in JavaScript.

[Seifer] So that's what it does. Inquiring minds wanted to know. >>Huh. >>Huh. >>Okay, enough.

This sounds a little bit crazy, and that might be what you're inquiring about, Jason.

Including media queries in your JavaScript sounds a little strange, right?

You normally include media queries in your CSS.

When you're creating a responsive design,

you want to go ahead and create your fluid grid,

and then as that starts to break down towards

smaller and smaller or larger and larger screen sizes,

you use media queries to apply different CSS to change the layout.

Now, in JavaScript, you can actually do something very similar,

but instead of applying different styling,

Enquire.js allows you to apply different JavaScript.

So as you start to get towards a larger screen size or a smaller screen size,

there might be different functions that you want to use

or different pieces of JavaScript entirely.

And you don't necessarily need it in other types of layouts.

So that's pretty handy, because it's probably going to end up

saving you CPU cycles when you're not executing different pieces of code.

So it's pretty nifty. >>I think it'll also clean up your code quite a bit,

whereas rather than hooking in to the window resize event

and checking the width and duplicating all of that,

just put in the media query. >>Yeah, exactly.

And the nice thing about it is it's super, super tiny.

I think it's only like a kilobyte or less, something like that.

And it doesn't have any dependencies, so you don't need jQuery.

You can just go ahead and use Enquire.js in your next web project

and enjoy blissful JavaScript goodness.

[Seifer] That, I think, is the show title.

"Blissful JavaScript Goodness." >>Got it.

[Seifer] Next up, there is a great blog post over on the NetTuts blog

on how to customize your command prompt.

As you may have been able to tell with the Shortcat review,

I really like knowing exactly what's going on on my system

and having shortcuts going around.

So if you're working in the terminal a lot,

this blog post will show you what you can do to customize different parts of it.

So if you want to see what Git branch you're on

or what directory you're currently in,

as well as the name of your computer, in this case, Mothership.

That's an okay name; I don't know if I'm totally sold.

I would probably go with something different, like Battlestar.

So this is just a really thorough blog post on how to go through

and customize your command prompt as well as some other tips

on maybe using a different command prompt or command shell.

So check that out. We'll have that in the show notes as well,

which is on our YouTube channel.

[Pettit] At youtube.com/gotreehouse. >>Yes.

[Pettit] Thank you. All right, next up is Grid-A-Licious,

and this is a really, really cool project

that's actually been around for quite some time.

It's been around since 2008. >>So why are we talking about it now?

[Pettit] Well, Jason, because it's still relevant.

I'm just going to go ahead and click around a little bit here.

So if I go ahead and click on these small little icons

that represent various device screen sizes,

you can see how Grid-A-Licious responds to those sizes.

[Seifer] Oh, it looks like it reflows your grid. >>Exactly.

Now-- >>That's delicious!

[Pettit] If I go ahead and scroll down here,

you can see that the cool thing about Grid-A-Licious

is that it compacts all of those different little divs, or boxes, into a smaller space.

Because sometimes when you have a row of elements that are different heights,

you'll get some weird spacing when you go down to the next row,

because if an element is really short and it's next to a really tall element,

you'll still have all of that space below the shorter one.

But the nice thing about Grid-A-Licious is that it compacts all those and sticks them all together.

So if you've ever checked out, say, Pinterest, this is kind of the layout that they have.

It's all sort of squished together. >>Oh, nice.

So they can recreate Pinterest. >>Exactly.

If you're looking to recreate Pinterest, this would be a great way to get started.

Now, in these examples you can go ahead and see what happens

when you append various elements, and they're randomly sized.

You can also prepend rows, and you can see how those might get filled in.

So it's pretty nifty, and, of course, this has been around a while,

but the thing that's new about it is that it's now responsive,

which is-- >>A thing. >>It's a thing.

It's pretty important. >>I guess. >>Yeah.

[Seifer] That's a cool project. >>Yeah, very cool.

I'm really pretty impressed by it.

[Seifer] It's delicious. >>Love it.

[Seifer] All right. Well, I think that's about out of time for us.

[Pettit] Jason, what did we learn today?

[Seifer] We learned that we're actually moving backwards in web time.

[Pettit] It's true. Screens are getting smaller, devices are getting slower,

and there's less and less bandwidth all the time.

Eventually, we're going to end up at a singularity,

where there's just no Internet at all.

[Seifer] I do not look forward to that day. >>Yeah.

I think it's the end of 2012, from what I've heard. >>Uh-oh.

Wow. I've got some emails to send and some web browsing to do.

So who are you on Twitter? >>I'm @NICKRP.

[Seifer] And I am @JSEIFER. We want to thank you so much

for tuning in to this episode of The Treehouse Show.

For show notes and more, check out our YouTube channel at youtube.com/gotreehouse.

[Pettit] And, of course, if you'd like to check out more videos like this one,

and learn about web design, web development, iOS, Android, and business,

be sure to check us out at teamtreehouse.com.

That's it for this week, and thank you so much for watching.

[The Treehouse Show]