Adaptive Images and Responsive SVGs – Treehouse Show Episode 15

treehouseShow15

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about Adaptive Images, Snappy Dashboards, Responsive images as SVGs and more!

Here are the links for the week:
Adaptive Images
http://adaptive-images.com/

Snappy Dashboards with Redis
http://blog.togo.io/how-to/snappy-dashboards-with-redis/

Responsive SVGs
http://www.joshuasortino.com/journal/creating-a-responsive-svg

Shortcat
http://shortcatapp.com/

Enquire.js
http://wickynilliams.github.com/enquire.js/

How to Customize Your Command Prompt
http://net.tutsplus.com/tutorials/tools-and-tips/how-to-customize-your-command-prompt/

Grid-A-Licious
http://suprb.com/apps/gridalicious/

Video Transcription

Nick: I’m Nick Pettit.

Jason: I’m Jason Seifer.

Nick: And, you’re watching the Treehouse Show. Your weekly dose of
Internets were we talk about all things web design, web development, and
more.

Jason: In this episode we’ll be talking about responsive image techniques,
controlling and customizing your development environment, and more.

Nick: Let’s check it out.

First up, is adaptive images available at adaptive-images.com and, of
course, on the show I feel like we talk 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 the cache it so that when
the next visitor comes by that image will be ready to go. And, it uses a
PHP script and hooks into Apache and it’s actually pretty clever in it’s
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.

Jason: So, this is going to save time, say if you’re on a iPhone or a
mobile device, you’re going to get a smaller image in thus the page is
going to load quicker which, is good for everybody I think in that
scenario, right?

Nick: Exactly. And, as it says on the site, your site is being viewed by
increasingly smaller, slower, and low bandwidth devices.

Jason: That’s good news.

Nick: Yeah. That’s, that’s, that’s great.

Jason: Awesome.

Nick: All right.

Jason: So, along those lines and completely not along those lines, our
next up is Snappy Dashboards with Redis. Now Nick, you’ve probably seen
applications where you log into the app and then it has a dashboard
overview of what’s going on. Maybe, how many clicks were someplace, or bar
graph of what’s going on?

Nick: Exactly.

Jason: Well, it can occasionally be very cumbersome to get at that data if
you’re using a relational database. This can take a lot of the different
queries to see the proper information, and it can wind up becoming a little
bit expensive.

Nick: Because, you have to kind of pull together all of these various
pieces of information.

Jason: Right. 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, kind of one of these newfangled no SQL
databases.

Nick: Whoa. Whoa.

Jason: I know. Lot of words there. Lot of words. But, Redis does
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 kind of the different keys that they wound up using, and even some
sample Ruby coding 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.

Jason: All right. Go Treehouse. So, next up we’re going to talk about how
to create a responsive SVG. Now, is it true that people are pronouncing SVG
as “savage?”

Nick:: No. I think that’s actually just you, Jason.

Jason: Thought I read that somewhere.

Nick: 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 actually very simple to creating a fluid image. So basically, you
would create your vector in Illustrator, and you want to go ahead an export
it as an SVG, and 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 in to your HTML document I should say. And then, in you CSS you can go
ahead and set the width to 100%. And, 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 it’s 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. So, 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, but.

Jason: I’m pretty sure it’s pronounced Savages.

Nick: I think you’re right, Jason. I’ll let you go on thinking that.

Jason: Thanks. Next up is our app review.

Nick: Let’s check it out.

Jason: Our app review this week is an app called Shortcat.

Nick: And, that has nothing to do with Long Cat.

Jason: Except, it’s the opposite.

Nick: Got it.

Jason: Shortcat is a very interesting application for OS X, and this is
going to give you the ability to in-face 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.

Nick: I only noticed the really cute cat, but.

Jason: Yeah. look at that. Look at that cat. It’s got a little computer
mouse hanging from its mouth.

Nick: That’s just crazy.

Jason: I know. Totally crazy. So, the example that they give us 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, and 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. 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. Yeah.

Nick: That’s pretty cool.

Jason: Really, really good app. Saves a lot of time. Gives you a lot of
short cuts with Shortcat.

Nick: And, 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 actually does take
a lot of time to click on small little buttons. So, anything you can do
with the keyboard is probably going to speed up your work flow. In fact,
Jason, introduced me to Gmail shortcuts in 2012.

Jason: I don’t know how you lived.

Nick: I didn’t, Jason. Not until now.

Jason: You weren’t really living.

Nick: Exactly. So, next up is Enquire.js, which is available at this really
long URL which will be in the lower third, and basically Enquire.js is a
way for you to include media queries in JavaScript. Whoa.

Jason: Oh. So, that’s what it does. Inquiring minds wanted to know. No?
Anybody?

Nick: Okay. That’s enough. this kind of sounds a little bit crazy and that
might be what you’re inquiring about, Jason. Including media queries in
your JavaScripts sounds a little strange, right? You normally include
[Bnet] 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. And 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 codes…

Jason: Yeah.

Nick: …It’s pretty nifty.

Jason: I think it’ll also clean up your code quit a bit, whereas rather
than hooking into the window re-size event, and checking the width, and
duplicating all that, just put in the media query.

Nick: Yeah, exactly. And, the nice thing about it is it’s super, super
tiny. It’s, I think it’s only like a kilobyte or less, or 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 and your next web project, and enjoy
blissful JavaScript goodness.

Jason: That, I think, is the show title. Blissful JavaScript Goodness.

Nick: Got it.

Jason: Next up, there is a great blog post over on the [Net Cutes 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 GetBranch you’re on, or
what directory you’re currently in, as well as the name of your computer.
In this case “Mother Ship,” that’s an okay name. I don’t know if I’m
totally sold. I would probably go with something different like “Battle
Star.”

Nick: Sweet.

Jason: Yeah. 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.

Nick: At youtube.com/gotreehouse.

Jason: Yes.

Nick: 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.

Jason: So, why are we talking about it now?

Nick: Well, Jason, because it’s still relevant so 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.

Jason: Oh, it looks like it re-flows your grid.

Nick: Exactly. Now…

Jason: That’s delicious.

Nick: If I go ahead and scroll down here you can see that the cool thing
about Grid-A-Licious is that it kind of compacts all of those different
little dibs or boxes into a smaller space, so. Because sometimes when you
have a row of elements that are different heights, you’ll get kind of 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, Pintrest, this is kind of the layout that they
have. It’s all sort of squished together.

Jason: Oh, nice.

Nick: So, the next…

Jason: They can recreate Pintrest.

Nick: Exactly. If you’re looking to recreate Pintrest, this would be a
great way to get started. Now, in these examples you can go ahead and see
what happens when you a pinned various elements, and they’re kind of
randomly sized, and you can also pre-pinned rows and you can see how those
might get filled in. So, it’s pretty nifty and of course, this has been
around awhile, but the thing that’s new about it now is that it’s now
responsive, which is…

Jason: A thing.

Nick: It’s a thing that’s…

Jason: It’s a thing.

Nick: …pretty important.

Jason: I guess.

Nick: Yeah.

Jason: That’s a cool project.

Nick: Yeah, very cool. I’m really actually pretty impressed by it.

Jason: It’s delicious.

Nick: Love it.

Jason: All right. Well, I think that’s about out of time for us.

Nick: Jason, what did we learn today?

Jason: We learned that we’re actually moving backwards in web time.

Nick: 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, so.

Jason: I do not look forward to that day.

Nick: Yep. I think it’s the end of 2012 from what I’ve heard.

Jason: Wow. Yeah. I got some e-mails to send and some web browsing to do.
Alright, so who are you on Twitter?

Nick: I’m @nickrp.

Jason: And, I am @jseifer. We want to thank you so much for joining in on
this episode of The Treehouse Show. For show notes and more, check out our
YouTube Channel at youtube.com/gotreehouse.

Nick: 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.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

Comments are closed.