Episode 14: Responsive Techniques, JavaScript MVC Frameworks, and Firefox 16

>>I'm Nick Pettit. >> I'm Jason Seifer. 0:00 >>And you're watching the Treehouse show, 0:03 your weekly dose of Internets where we talk about all things Web design, 0:05 Web development, and more. 0:08 >>In this episode, we'll be talking about responsive techniques, 0:10 JavaScript MVC Frameworks, and a whole lot more. 0:13 >>Let's check it out. 0:16 [The Treehouse Show] 0:21 >>Nick, do you remember a few weeks ago, 0:24 where we talked about Firefox 16 Beta and the cool new developer features it had? 0:27 >>I don't remember at all. 0:30 >>Oh, it was pretty much a black out day for me, too, 0:32 but the good news is Firefox 16 Final has been released. 0:34 This includes really cool features, 0:38 such as the new developer toolbar, 0:40 unprefixed CSS3 transitions, 0:43 and animations, transitions, and transforms, 0:47 as well as gradients and debugger breakpoints 0:52 do not cache on page reload, 0:55 as well as the usual roundup of fixes, 0:57 so head on over to GetFirefox.com 0:59 to update your Firefox browser. 1:02 >>Sweet; very cool stuff. 1:05 Next up is this really cool tool called Responsivator. 1:07 Wanted to make sure I was saying that right. 1:11 >>Kind of like the word responsive and elevator. 1:13 >>Exactly; thank you, Jason. 1:15 Basically, it's this tool 1:18 that can show you what your Web site looks like 1:20 at various media query breakpoints, 1:22 so when when you're designing a responsive site, 1:25 you want to check what the site looks like 1:28 at a couple of different widths, 1:31 and you can just scroll from left to right 1:33 and in this case, we're looking at Microsoft's Web site. 1:36 You can actually view random Web sites 1:39 that are known to be responsive 1:41 and will look really great here. 1:43 But let's go ahead and type in, say, 1:45 the BostonGlobe.com 1:47 and we'll click Responsivate. 1:51 And here we can see the Boston Globe looks great 1:54 at these various resolutions, 1:58 and it even gives you a little bit of a description 2:00 as to what this resolution might encapsulate, 2:02 such as a phone, 2:05 a small or a large tablet, 2:07 and of course, desktop displays. 2:09 So pretty nifty. 2:12 You should definitely try to always use the real device, 2:14 such as a phone or a tablet when you're testing responsive sites, 2:17 but this is a handy tool just to check something real quick, 2:21 kind of as you're developing the site. 2:24 >>That would probably also be really good for presentations to clients 2:27 if you want to show them everything you've been working on 2:29 and just have 1 quick spot to look at all the different resolutions. 2:32 >>Rather than bringing in your whole device test suite 2:35 and saying, "Why can't I hold all of these phones?" 2:38 All right, cool. 2:42 >>We're there for you. 2:44 >>Yup, trying to resolve awkward situation. 2:46 >>Or create them. 2:48 Next up, over on the Eventual Consistency blog 2:50 is a really great blog post on 8 ways to make your single-page web app faster. 2:53 This is a collection of techniques 2:59 more for when you're working with a JavaScript MVC Framework 3:01 and we're going to talk about that a little bit later, too. 3:05 But there's some great tips in here, like avoiding reflowing the dom, 3:08 because that is going to slow your site down a lot 3:11 if you keep having to reflow everything. 3:15 Really getting to know the framework that you're using, 3:18 a lot of the frameworks these days, 3:20 you know, backbone, spine, ember, 3:22 will have little tips and techniques to use 3:24 to keep everything quick. 3:26 Finally, your templates use web sockets 3:28 when you're supposed to. 3:32 One really big one is to, as they say, stop hoarding, 3:34 which means, hey, yes, it's great and quick 3:38 to put something in memory if you need to access it later, 3:41 but on older browsers or systems that don't have a lot of memory, 3:44 this can become kind of cumbersome and actually slow down your page. 3:48 So there's techniques to get around that, 3:52 such as pagination of large collections and things like that. 3:54 Definitely recommend reading this whole post, 3:57 because there's some really, really good tips in here, 4:00 and we'll have that in the show notes 4:02 at our YouTube channel at YouTube.com/gotreehouse. 4:04 >>All right, Go Treehouse. 4:08 Next up is Patternify; again, I want to make sure I'm saying this right. 4:11 Patternify. 4:15 >>It could be Pattern-if-why. 4:17 >>Clever. 4:20 and it's this tool 4:22 that allows you to create patterns 4:25 that you can use in your CSS. 4:27 So it looks a little bit funky, 4:30 so let me go ahead and explain each part of this. 4:33 Over on the left here, we have this grid 4:36 and in this grid, 4:39 we can go ahead and place these dots, just like that, 4:41 and over on the right, we'll get a preview 4:45 of what that pattern will ultimately look like. 4:48 There's some numbers here, 4:50 and we can adjust the size of this pattern, 4:52 for example. 4:54 And they also have some pre-built patterns down here, 4:56 so if you click, you can kind of see what those patterns might end up looking like, 5:00 and then you can, of course, 5:04 go ahead and get the Base64 encoded version 5:06 or click to download the png. 5:09 This is pretty nifty 5:13 and often times, when you're coding up your CSS, 5:16 you'll want to go ahead and include patterns like this 5:19 in maybe the backgrounds of your site 5:23 or in various page elements, 5:25 just to give them a little bit of texture, 5:28 because when you add texture to page elements, 5:30 it actually increases the depth of the site. 5:32 It makes it look more visually rich. 5:36 Textures are also an interesting way 5:38 to augment gradients, 5:40 so if you're creating, say, a CSS3 gradient from one color to another, 5:42 and you're getting maybe some color banding 5:47 in a really subtle looking gradient that goes 5:50 from one very similar color to another similar color, 5:53 it's good to layer 5:55 a pattern or maybe a noisy pattern on top of that, 5:58 and that will kind of mitigate some of that color banding, 6:02 and it also just makes it look like it has more colors 6:04 and look more visually rich. 6:07 So Patternify, really cool tool 6:09 for making those patterns very quickly. 6:11 >>I know some of those words. 6:14 Next up is a really, really interesting site called TodoMVC. 6:16 I really love this project. 6:21 What this does is it takes your classic to-do list application, 6:24 and it shows you how to do it 6:27 using a whole bunch of different JavaScript MVC frameworks. 6:30 They have backbone.js, spine, YUI, 6:34 batman.js, 6:38 and these are all of the different stable applications that they have, 6:40 and what you can do is you can actually click into any of these 6:44 and see how an entire application looks 6:47 that is coded in this framework. 6:50 They're using the same project, the TodoMVC, 6:53 and you can see how this works in each of these different frameworks. 6:56 This is incredibly beneficial 6:59 if you're going to be evaluating some of these frameworks 7:01 or if you're just picking a new one to learn and to experiment, 7:04 get to see how it actually looks. 7:08 So, love this project. 7:10 This is at ToDoMVC.com 7:12 or TodoMVC; that might help you remember it a little bit better. 7:14 Whatever. 7:18 So yeah, check that out, kind of love it. 7:20 >>Wow, that sounds a lot better than the Post-It notes 7:22 I've been using and just sticking all over my monitor. 7:25 Next up is CSS FilterLab 7:28 and this is a project from Adobe 7:33 that allows you to see what various CSS filters will end up looking like, 7:36 so up here on the left, 7:41 you can go ahead and add in a filter, 7:43 and I've gone ahead and added a few filters here already. 7:45 And with this filter here, for example, 7:50 we can go ahead and blur this image. 7:53 And then we have some controls here to go ahead 7:56 and adjust the intensity of the filter. 7:59 Now, in this case, 8:02 we're using a blur so there's just 1 value that we're adjusting, 8:04 but down here at the bottom, 8:09 you can see that it also gives you the code for that filter, 8:11 so you can go ahead and just copy that right into your Web site. 8:16 So it's kind of nice, 8:20 because CSS filters are fairly new, 8:22 and it might be a little bit confusing 8:24 to work with the syntax right away, 8:27 but this way, you can kind of quickly experiment 8:29 and then go ahead and see what that code ends up looking like, 8:32 so you don't have to just code up everything yourself 8:36 from memory or from documentation. 8:39 So really cool; I love WYSIWYG tools like this. 8:42 I mean, they do slow you down a little bit, 8:45 but they also help you explore things in a different way. 8:47 and allow you to explore design ideas that you might not have 8:51 been exploring just in code. 8:54 >>I think this one is particularly awesome 8:57 just because of the key frames and animation they give you. 8:59 >>Yes, that's very true. 9:03 You can also go ahead and animate stuff here over time 9:05 and hit this little play button, so that's pretty nifty, as well. 9:08 >>Yeah, that's awesome. 9:12 Next up, there's a site called DBPatterns. 9:14 This is a service that allows you to create, share, and explore 9:16 database models on the Web. 9:20 So this is going to be useful if you are designing a Web application 9:23 and I mean the back end. 9:27 Maybe you're starting to work with the database 9:29 and set up all of your different models and things like that. 9:31 You're going to want to go through and really set up a database layout 9:33 and how things might work. 9:36 So what DBPatterns is going to do 9:38 is it has a list of patterns on there, 9:40 and you can show them or add new ones, 9:43 but let's take a look at the user roles and permissions one. 9:45 You can click into these, 9:48 and it will show you what the database schema might look like. 9:50 This is something that somebody has done before, 9:53 and they said, "Hey, yeah, that looks pretty cool. I like it." 9:56 Then you can fork this 9:59 if you need to add something to it 10:01 or just use it as it is. 10:03 So right now, it's a pretty sparse collection 10:05 of patterns, 10:09 but I'm imagining that they're going to be 10:11 adding a lot more, 10:13 and you can go ahead and add them, too. 10:15 So that is at DBPatterns.com 10:17 Make sure to check that one out. 10:19 >>That's really cool. 10:21 I'll be sure to look at all those before I go to the next party, 10:23 because I've got to have something to talk about. 10:26 Yeah, I can just go ahead and talk to people about database patterns. 10:29 >>It's going to be my Halloween costume. 10:33 >>Sweet! 10:35 All right, next up is PFold, 10:37 which is a paper-like unfolding effect 10:40 and for this, we're actually going to switch over the Jason's laptop, 10:42 because for some reason, this is not working in my version of Chrome. 10:46 I don't know why, but I promise you it works just fine in Chrome and in Safari. 10:51 It's saying that CSS 3D transforms 10:56 are not supported in my browser, which is a lie. 11:00 So basically, 11:03 PFold is just this paper-like unfolding effect 11:05 like I said, and you can go ahead 11:08 and click on the various effects here, 11:11 and see what this looks like. 11:14 Here's another example. 11:17 And there's really not a whole lot to say, 11:20 but you can go ahead and check out the code 11:23 and include this in your own Web site 11:26 and the places you might use this might be 11:29 if you have maybe say 11:32 a thumbnail 11:34 for an image or something 11:36 and you want to look at the caption for that image, 11:38 you can maybe unfold it or-- 11:42 >>How about an address book? 11:43 >>An address book might be a good example, 11:45 if you want to view more details, 11:47 so basically where you have a small amount of information 11:49 and then you want to see more about that 11:51 or if you want to see more details. 11:54 It might also be cool for maybe mapping applications. 11:56 I'm not sure how well that would work out, 11:59 but it definitely brings to mind the idea of unfolding a map 12:02 or folding it back up if you wanted to show an address. 12:06 Maybe, like you said, an address book. 12:09 >>I like it. 12:13 So Nick, do you know what we learned today? 12:15 >>What did we learn today, Jason? 12:17 >>We learned that it's important to learn your responsive techniques 12:19 and your JavaScript MVC Frameworks. 12:22 >>Very cool stuff. 12:25 If you want to check up out on Twitter, 12:27 I am @NickRP. >>I am at JSeifer. 12:29 We want to thank you so much for tuning into this episode of The Treehouse Show. 12:32 For show notes and more, 12:35 check out our YouTube Channel 12:37 at YouTube.com/GoTreehouse. 12:39 >>And of course, if you want to see more videos like this one 12:41 and learn all about Web design, 12:44 Web development, business, IOS, and Android, 12:46 be sure to check us out at TeamTreehouse.com. 12:49 Thanks so much for watching, and we'll see you next week. 12:52 [The Treehouse Show] 12:55

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

Sign up