Episode 15: Adaptive Images and Responsive SVGs

[The Treehouse Show] 0:00 Hi, I'm Nick Pettit. >>I'm Jason Seifer. 0:02 [Pettit] And you're watching The Treehouse Show, your weekly dose of Internet, 0:04 where we talk about all things web design, web development, and more. 0:07 [Seifer] In this episode, we'll be talking about responsive image techniques, 0:11 controlling and customizing your development environment, and more. 0:15 [Pettit] Let's check it out! 0:19 [The Treehouse Show] 0:21 First up is adaptive images, available at adaptive-images.com. 0:27 On the show, I feel like we've talked about responsive web design 0:33 every single episode, but it's because it's important. 0:37 And adaptive images makes it even easier. 0:40 Basically, when a visitor comes to your website, 0:43 it will detect the screen size, automatically create a rescaled image, 0:46 and then cache it so that when the next visitor comes by, 0:51 that image will be ready to go. 0:55 It uses a PHP script and hooks into Apache, 0:59 and it's actually pretty clever in its implementation. 1:04 But the bottom line is, it will create smaller images 1:07 that are more appropriately scaled in terms of their file size to smaller mobile devices. 1:11 [Seifer] So this is going to save time, say, if you're on an iPhone or a mobile device. 1:17 You're going to get a smaller image and thus the page is going to load quicker, 1:22 which is good for everybody, I think, in that scenario, right? 1:25 [Pettit] Exactly. And as it says on the site, 1:29 your site is being viewed by increasingly smaller, slower, 1:33 and low bandwidth devices. 1:37 [Seifer] That's good news. >>Yeah. That's great. 1:40 [Seifer] Awesome. >>All right. 1:43 [Seifer] So along those lines, and completely not along those lines, 1:45 next up is Snappy Dashboards with Redis. 1:48 Now, Nick, you've probably seen applications where you log into the app 1:52 and it has a dashboard overview of what's going on, 1:56 maybe how many clicks were someplace, or a bar graph of what's going on. >>Exactly. 1:58 [Seifer] Well, it can occasionally be very cumbersome 2:04 to get at that data if you're using a relational database. 2:07 This could take a lot of different queries to see the proper information, 2:10 and it can wind up becoming a little bit expensive. 2:15 [Pettit] Because you have to pull together all these various pieces of information. 2:18 [Seifer] Yeah. You have to assemble a whole bunch. 2:22 So there's an interesting blog post called "Snappy Dashboards with Redis." 2:23 Now, this talks about using Redis, which is one of these 2:29 newfangled, NoSQL databases. >>Whoa. >>I know. 2:32 A lot of words there. A lot of words. 2:37 But what Redis does is, essentially, it's like a glorified key value store that's persistent. 2:40 So the technique that they use in this post is concatenating 2:45 all your different statistics with certain Redis keys 2:50 that are going to be a lot quicker to increment and decrement. 2:53 This way, when you want to create a dashboard, 2:57 you only have to do a limited amount of querying 2:59 from Redis rather than your database. 3:02 This is going to result in a lot quicker page use for your users. 3:05 The blog post has more specific techniques on how they wound up doing this, 3:09 and the different keys that they wound up using, 3:13 and even some sample Ruby code in order to do this. 3:17 This is definitely something that you're going to want to 3:20 read the show notes for for more information, 3:23 and you can find the show notes on our YouTube channel 3:25 at youtube.com/gotreehouse. 3:28 [Pettit] All right. Go treehouse. So next up, 3:31 we're going to talk about how to create a responsive SVG. 3:34 [Seifer] Now, is it true that people are pronounicing SVG as "savage?" 3:39 [Pettit] No. I think that's actually just you, Jason. 3:42 [Seifer] Thought I read that somewhere. >>Nope. 3:45 You just made that up. All right. 3:47 Actually, we're not going to tell you how to do it, we're going to direct you 3:51 to this really great blog post that tells you exactly how to do it. 3:53 And actually, it's very simple. 3:57 It's very simple to creating a fluid image. 4:00 Basically, you would create your vector image in Illustrator, 4:03 and you want to go ahead and export it as an SVG. 4:09 I am kind of glossing over this a little bit, 4:12 but ultimately, you'll end up with some HTML that is your SVG, 4:16 and you can put that into your HTML document, I should say. 4:21 Then, in your CSS, you can go ahead and set the width to 100%. 4:26 That's very similar to what you would do for images in a responsive website. 4:33 What this is going to do is it's going to cause the SVG 4:38 to take up the full width of its parent element, 4:41 and that way, if you're resizing the browser in a fluid layout, 4:44 it will go ahead and just continue to expand or contract proportionally. 4:51 Pretty nifty, and again, it's very similar to fluid images, 4:58 but it's something that, I don't know, I wouldn't have known that had I not read it. 5:02 [Seifer] I'm pretty sure it's pronounced "savages." 5:08 [Pettit] I think you're right, Jason. I'll let you go on thinking that. 5:11 [Seifer] Thanks. Next up is our app review. 5:14 [Pettit] Let's check it out. 5:18 [App Review] 5:22 [Seifer] Our app review this week is an app called Shortcat. 5:26 [Pettit] And that has nothing to do with Longcat. >>Except it's the opposite. >>Got it. 5:29 [Seifer] Shortcat is a very interesting application for OS X. 5:34 And this is going to give you the ability to interface with GUI elements using the keyboard. 5:38 Now, I know that's a little bit strange to say, 5:46 but you get a command prompt, and--yeah, here we go. 5:48 Cut to it. You'll notice this little video they have on the site in system preferences. 5:52 [Pettit] I only notice the really cute cat. 5:57 [Seifer]. Yeah, look at that. Look at that cat. 5:59 It's got a little computer mouse hanging from its mouth. 6:01 [Pettit] That's crazy. >>I know. 6:04 So the example that they give is in system preferences, 6:08 and if you wanted to go to the network preference, 6:10 you do the Shortcat shortcut, and press the letter 'n' for network. 6:13 Then you can completely navigate around the OS X GUI using Shortcat. 6:20 What I found that's really interesting is it works with Chrome as well. 6:26 So let me see if I can get my navigation bar up here 6:31 So I launch Shortcat with command + shift + space. 6:33 You see the little cat eyes come up on the bottom of the screen, 6:37 and if I wanted to access the Chrome menu, I could type 'c,' 6:40 and you can see in the top right corner of the screen it gets highlighted in green, 6:44 press enter, and it shows you what's going on. 6:48 [Pettit] Huh. That's pretty cool. >>Really, really good app. 6:51 Saves a lot of time. 6:54 Well, you know. Gives you a lot of shortcuts with Shortcat. 6:57 [Pettit] And, you know, shortcuts are actually one of those interesting things 7:00 that, they never seem like they're going to save a lot of time, 7:03 but actually moving your mouse around the screen, as lazy as this sounds, 7:06 it does take a lot of time to click on small, little buttons. 7:12 So anything that you can do with the keyboard is probably going to speed up your workflow. 7:16 In fact, Jason introduced me to Gmail shortcuts in 2012. 7:21 [Seifer] I don't know how you lived. >>I didn't, Jason. Not until now. 7:27 [Seifer] You weren't really living. >>Exactly. 7:30 So next up is Enquire.js, which is available at this really long URL 7:33 which will be in the lower third. 7:40 Basically, Enquire.js is a way for you to include media queries in JavaScript. 7:42 [Seifer] So that's what it does. Inquiring minds wanted to know. >>Huh. >>Huh. >>Okay, enough. 7:51 This sounds a little bit crazy, and that might be what you're inquiring about, Jason. 8:00 Including media queries in your JavaScript sounds a little strange, right? 8:06 You normally include media queries in your CSS. 8:10 When you're creating a responsive design, 8:14 you want to go ahead and create your fluid grid, 8:17 and then as that starts to break down towards 8:20 smaller and smaller or larger and larger screen sizes, 8:23 you use media queries to apply different CSS to change the layout. 8:26 Now, in JavaScript, you can actually do something very similar, 8:32 but instead of applying different styling, 8:37 Enquire.js allows you to apply different JavaScript. 8:40 So as you start to get towards a larger screen size or a smaller screen size, 8:45 there might be different functions that you want to use 8:50 or different pieces of JavaScript entirely. 8:54 And you don't necessarily need it in other types of layouts. 8:58 So that's pretty handy, because it's probably going to end up 9:02 saving you CPU cycles when you're not executing different pieces of code. 9:04 So it's pretty nifty. >>I think it'll also clean up your code quite a bit, 9:10 whereas rather than hooking in to the window resize event 9:13 and checking the width and duplicating all of that, 9:16 just put in the media query. >>Yeah, exactly. 9:19 And the nice thing about it is it's super, super tiny. 9:22 I think it's only like a kilobyte or less, something like that. 9:25 And it doesn't have any dependencies, so you don't need jQuery. 9:30 You can just go ahead and use Enquire.js in your next web project 9:34 and enjoy blissful JavaScript goodness. 9:38 [Seifer] That, I think, is the show title. 9:43 "Blissful JavaScript Goodness." >>Got it. 9:45 [Seifer] Next up, there is a great blog post over on the NetTuts blog 9:48 on how to customize your command prompt. 9:52 As you may have been able to tell with the Shortcat review, 9:55 I really like knowing exactly what's going on on my system 9:58 and having shortcuts going around. 10:02 So if you're working in the terminal a lot, 10:05 this blog post will show you what you can do to customize different parts of it. 10:08 So if you want to see what Git branch you're on 10:12 or what directory you're currently in, 10:15 as well as the name of your computer, in this case, Mothership. 10:18 That's an okay name; I don't know if I'm totally sold. 10:21 I would probably go with something different, like Battlestar. 10:23 So this is just a really thorough blog post on how to go through 10:28 and customize your command prompt as well as some other tips 10:31 on maybe using a different command prompt or command shell. 10:34 So check that out. We'll have that in the show notes as well, 10:38 which is on our YouTube channel. 10:41 [Pettit] At youtube.com/gotreehouse. >>Yes. 10:43 [Pettit] Thank you. All right, next up is Grid-A-Licious, 10:46 and this is a really, really cool project 10:50 that's actually been around for quite some time. 10:53 It's been around since 2008. >>So why are we talking about it now? 10:56 [Pettit] Well, Jason, because it's still relevant. 11:00 I'm just going to go ahead and click around a little bit here. 11:02 So if I go ahead and click on these small little icons 11:06 that represent various device screen sizes, 11:10 you can see how Grid-A-Licious responds to those sizes. 11:14 [Seifer] Oh, it looks like it reflows your grid. >>Exactly. 11:20 Now-- >>That's delicious! 11:23 [Pettit] If I go ahead and scroll down here, 11:25 you can see that the cool thing about Grid-A-Licious 11:28 is that it compacts all of those different little divs, or boxes, into a smaller space. 11:30 Because sometimes when you have a row of elements that are different heights, 11:41 you'll get some weird spacing when you go down to the next row, 11:46 because if an element is really short and it's next to a really tall element, 11:49 you'll still have all of that space below the shorter one. 11:54 But the nice thing about Grid-A-Licious is that it compacts all those and sticks them all together. 11:58 So if you've ever checked out, say, Pinterest, this is kind of the layout that they have. 12:04 It's all sort of squished together. >>Oh, nice. 12:08 So they can recreate Pinterest. >>Exactly. 12:12 If you're looking to recreate Pinterest, this would be a great way to get started. 12:15 Now, in these examples you can go ahead and see what happens 12:20 when you append various elements, and they're randomly sized. 12:23 You can also prepend rows, and you can see how those might get filled in. 12:28 So it's pretty nifty, and, of course, this has been around a while, 12:33 but the thing that's new about it is that it's now responsive, 12:37 which is-- >>A thing. >>It's a thing. 12:41 It's pretty important. >>I guess. >>Yeah. 12:44 [Seifer] That's a cool project. >>Yeah, very cool. 12:48 I'm really pretty impressed by it. 12:50 [Seifer] It's delicious. >>Love it. 12:52 [Seifer] All right. Well, I think that's about out of time for us. 12:59 [Pettit] Jason, what did we learn today? 13:01 [Seifer] We learned that we're actually moving backwards in web time. 13:03 [Pettit] It's true. Screens are getting smaller, devices are getting slower, 13:07 and there's less and less bandwidth all the time. 13:11 Eventually, we're going to end up at a singularity, 13:14 where there's just no Internet at all. 13:16 [Seifer] I do not look forward to that day. >>Yeah. 13:19 I think it's the end of 2012, from what I've heard. >>Uh-oh. 13:21 Wow. I've got some emails to send and some web browsing to do. 13:23 So who are you on Twitter? >>I'm @NICKRP. 13:28 [Seifer] And I am @JSEIFER. We want to thank you so much 13:31 for tuning in to this episode of The Treehouse Show. 13:33 For show notes and more, check out our YouTube channel at youtube.com/gotreehouse. 13:36 [Pettit] And, of course, if you'd like to check out more videos like this one, 13:41 and learn about web design, web development, iOS, Android, and business, 13:45 be sure to check us out at teamtreehouse.com. 13:49 That's it for this week, and thank you so much for watching. 13:52 [The Treehouse Show] 13:58

You need to sign up for Treehouse in order to set up Workspace

Sign up