Responsive Techniques, JavaScript MVC Frameworks, Firefox 16 | Treehouse Show Episode 14

treehouseShow14

In this episode of The Treehouse Show, Nick Pettit (@nickrp) and Jason Seifer (@jseifer) talk about responsive techniques, JavaScript MVC frameworks, and more..

Here are the links for the week:
Firefox 16 Released
http://www.mozilla.org/en-US/firefox/16.0/releasenotes/

Responsivator
http://dfcb.github.com/Responsivator/

8 ways to make your single-page web app faster
http://ozkatz.github.com/8-ways-to-make-your-single-page-web-app-faster.html

Patternify
http://www.patternify.com/

TodoMVC
http://todomvc.com/

CSS FilterLab
http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/

dbpatterns
http://dbpatterns.com/

PFold
http://tympanus.net/codrops/2012/10/17/pfold-paper-like-unfolding-effect/

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, where we talk about all things web design, web development, and more.

Jason: In this episode, we’ll be talking about responsive techniques, Javascript MVC frameworks, and a whole lot more.

Nick: Let’s check it out.

(music)

Jason: Nick, do you remember a few weeks ago, where we talked about Firefox 16 Beta, and the cool new developer features it had?

Nick: I don’t remember at all.

Jason: Well, it was pretty much a blackout day for me, too, but the good news is Firefox 16 Final has been released. This includes really cool features, such as the new developer toolbar, un-prefixed CSS3 transitions, and abations, transitions, and transforms, as well as gradients and de-bugger breakpoints do not catch on page reload, as well as the usual round-up of fixes. So head on over to GetFirefox.com to update your Firefox browser.

Nick: Sweet. Very cool stuff. Next up is this really cool tool called Responsivator. I wanted to make sure I was saying that right.

Jason: Kind of like saying responsive and elevator.

Nick: Exactly.

Jason: Combined.

Nick: Thank you, Jason. Basically, it’s a tool that can show you what your website looks like at various media query break points. So when you’re designing a responsive site, you want to check what the site looks like at a couple of different widths, and you can just scroll from left to right, and in this case, we’re looking at Microsoft’s website. You can actually view random websites that are known to be responsive, and will look really great here, but let’s go ahead and type in, say, the BostonGlobe.com, and we’ll click “Responsive 8″, and here we can see the Boston Globe looks great at these various resolutions, and it even gives you a little bit of a description as to what this resolution might encapsulate, such as a phone, a small or a large tablet and, of course, desktop displays. So, pretty nifty, you should definitely try to always use the real device, such as a phone or a tablet, when you’re testing responsive sites, but this is a handy tool just to check something real quick, kind of as you’re developing the site.

Jason: That would probably also be really good for presentations to clients, if you want to show them everything you’ve been working on, and just have one quick spot to look at all the different resolutions.

Nick: Rather than bringing in your whole device test (?), and saying “Why can’t I hold all of these phones?”

Jason: Exactly.

Nick: Right. Alright. Cool.

Jason: We’re there for you.

Nick: Yeah, trying to resolve awkward situations.

Jason: Or create them. Next up, over on the Eventual Consistency blog is a really great blog post on 8 Ways to Make Your Single-Page Web App Faster. This is a collection of techniques, more for when you’re working with a Javascript MVC framework. And we’re going to talk about that a little bit later, too. But there’s some great tips in here, like avoiding reflowing the DOM, because that is going to slow your site down a lot, if you keep having to reflow everything, really knowing the framework that you’re using. A lot of the frameworks these days, you know, Backbone, Spine, Ember, will have little tips and techniques to use to keep everything quick. Finally, know your templates, use web sockets when you’re supposed to. And one really big one is to, as they say, stop hoarding, which means, hey, yes, it’s great and quick to put something in memory if you need to access it later, but on older browsers or systems that don’t have a lot of memory, this can become kind of cumbersome and actually slow down your page. So, there’s techniques to get around that, such as pagination of large collections, and things like that. I definitely recommend reading this whole post, because there’s some really, really good tips in here, and we’ll have that in the show notes at our Youtube channel, at youtube.com/gotreehouse.

Nick: Alright. Go Treehouse.

Jason: Go Treehouse.

Nick: Next up is Patternify. Again, I want to make sure I’m saying this right. Pattern-, -ify.

Jason: It could be Pattern-, -if, -why.

Nick: Ooh.

Jason: Yeah.

Nick: Clever. And it’s this tool that allows you to create patterns that you can use in your CSS. So, it looks a little bit funky, so let me go ahead and explain each part of this. Over on the left here, we have this grid, and in this grid, we can go ahead and place these dots, just like that, and over on the right, we’ll get a preview of what that pattern will ultimately look like. There’s some numbers here, and we can adjust the size of this pattern, for example, and they also have some pre-built patterns down here. So if you click, you can kind of see what those patterns might end up looking like. And then you can, of course, go ahead and get the Base 64 encoded version, or click to download the png. This is pretty nifty and oftentimes, when you’re coding up your CSS, you’ll want to go ahead and include patterns like this in, maybe, the backgrounds of your site, or various page elements just to give them a little bit of texture, because when you add texture to page elements, it actually increases the depth of the site. It makes it looks visually rich. Textures are also an interesting way to augment gradients. So if you’re creating, say, a CSS3 gradient from one color to another, and you’re getting, maybe, some color banding in a really subtle-looking gradient that goes from one very similar color to another similar color, it’s good to layer a pattern, or maybe a noisy pattern, on top of that, and that will kind of mitigate some of that color banding, and it will also just make it look like it has more colors, and look more visually rich. So Patternify, really cool tools for making those patterns very quickly.

Jason: I know some of those words.

Nick: Alright.

Jason: Next up is a really, really interesting site called To Do MVC. I really love this project which, what it does, it takes your classic to-do list application, and it shows you how to do it using a whole bunch of different Javascript MVC frameworks. They have Backbone.js, Spine, YUI, Batman.js, and these are all of the different stable applications that they have. And what you can do is, you can actually click into any of these and see how an entire application looks that is coded in this framework, you know, and they’re using the same project, the To Do MVC, and you can see how this works in each of these different frameworks. This is incredibly beneficial if you’re going to be evaluating some of these frameworks, or if you’re just picking a new one to learn and to experiment, you know, get to see how it actually looks. So, love this project, this is at ToDoMVC.com, or TodoMVC, that might help you remember it a little bit better, whatever. So yeah, check that out. Kinda love it.

Nick: Wow, that sounds a lot better than the Post-It notes I’ve been using, and just sticking all over my monitor.

Jason: Yeah, so.

Nick: Alright, cool. Next up is CSS Filter Lab, and this is a project from Adobe that allows you to see what various CSS filters will end up looking like. So, up here on the left, you can go ahead and add in a filter, and I’ve gone ahead and added in a few filters here already, and with this filter here for example, we can go ahead and blur this image, and then we have some controls here to go ahead and adjust the intensity of the filter. Now, in this case, we’re using a blur, so there’s just one value that we’re adjusting. But down here at the bottom, you can see that it also gives you the code for that filter, so you can go ahead and just copy that right into your website. So it’s kind of nice because CSS filters are fairly new, and it might be a little bit confusing to work with the syntax right away, but this way you can kind of quickly experiment, and then go ahead and see what that code ends up looking like, so you don’t have to just code up everything yourself from memory or from documentation, so really cool. I love (?) tools like this. I mean, they do slow you down a little bit, but they also help you explore things in a different way, and allow you to explore design ideas that you might not have been exploring just in code. (SS)

Jason: I think this one is particularly awesome, just because of the key frames and animation it will give you.

Nick: Yes, that’s very true. You can also go ahead and animate stuff here over time, and hit this little play button, so that’s pretty nifty as well.

Jason: Yeah. That’s awesome.

Nick: Very cool.

Jason: Next up, there is a site called DB Patterns. This is a service that allows you to create, share, and explore database models on the web. So, this is going to be useful if you are designing a web application. And, I mean, the back end, maybe you’re starting to work with the database and set up all your different models and things like that. You’re going to want to, you know, go through and really set up a database layout, and how things might work. So what DB Patterns is going to do is, it has a list of patterns on there and you can show them or add new ones, but let’s take a look at the user roles and permissions one. What you can do, you can click into these, and it will show you what the database schema might look like. And this is something that, you know, somebody has done before, and they said, “Hey, yeah, that looks pretty cool. I like it.” Then you can, you know, fork this if you need to add something to it, or just use it as it is. So, right now it’s a pretty sparse collection of patterns, but I am imagining that they’re going to be adding a lot more, and you can go ahead and add them, too. So that it at dbpatterns.com, make sure to check that one out.

Nick: That’s really cool. I’ll be sure to look at all of those before I, you know, go to the next party, because, you know, you’ve got to have something to talk about. (SS)

Jason: Print them out for the party.

Nick: Yeah.

Jason: Print them out for the party.

Nick: Yeah, I can just go ahead and talk to people about database patterns.

Jason: It’s going to be my Halloween costume.

Nick: Sweet. Alright, next up Pfold, which is a paper-like unfolding effect, and for this, we’re actually going to switch over to Jason’s laptop, because for some reason, this is not working in my version of Chrome. I don’t know why, but I promise you it works just fine in Chrome and in Safari. It’s saying that CSS 3D transforms are not supported in my browser, which is a lie. So basically, Pfold is just this paper-like unfolding effect, like I said, and you can go ahead and click on the various effects here and see what this looks like. See, here’s another example. And there’s really not a whole lot to say, but you can go ahead and check out the code and include this in your own website. And the places you might use this might be if you have, maybe, say, a thumbnail for an image or something, and you want to look at the caption for that image, you could maybe unfold it, or.

Jason: How about an address book?

Nick: An address book might be a good example if you want to view more details. Basically, where you have, you know, a small amount of information, and then you want to see more about that, or if you want to see more details. Might also be cool for, maybe, mapping applications. I’m not sure how well that would work out, but it definitely brings to mind the idea of unfolding a map, or folding it back up, if you wanted to show an address, maybe, like you said, in an address book.

Jason: I like it.

Nick: Cool.

Jason: So Nick, do you know what we learned today?

Nick: What did we learn today, Jason?

Jason: We learned that it’s important to know your responsive techniques, and your javascript MVC frameworks.

Nick: Very cool stuff. If you want to, check us out on Twitter. I am @NickRP.

Jason: I am @JSeifer. We want to thank you so much for tuning into 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 want to see more videos like this one and learn all about web design, web development, business, iOS, and Android, be sure to check us out at TeamTreehouse.com. Thanks so much for watching, and we’ll see you next week.

(music)

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.