Here are the links for the week:
Firefox 16 Released
8 ways to make your single-page web app faster
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.
Nick: Let’s check it out.
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: 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?”
Nick: Right. Alright. Cool.
Jason: We’re there for you.
Nick: Yeah, trying to resolve awkward situations.
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: 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: 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.
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.
Jason: So Nick, do you know what we learned today?
Nick: What did we learn today, Jason?
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.