LearnBackbone.js, Responsive Background Images, and HTML5 APIs | Treehouse Show Ep 18


writes on November 27, 2012

In this episode of The Treehouse Show, Jim Hoskins (@jimrhoskins) and Jason Seifer (@jseifer) talk about Backbone.js, html5 APIs, and the app of the week is Sequel Pro.

Here are the links for the week:


Noise Texture Generator

5 More HTML5 APIs You Didn’t Know Existed

Responsive Background Images

Sequel Pro

Editable for Bootstrap


What Every Programmer Absolutely, Positively Needs To Know About Encodings And Character Sets To Work With Text

Video Transcript

Jim: I’m Jim Hoskins.

Jason: And I’m Jason Seifer.

Jim: Welcome to the Treehouse Show, your weekly dose of internets, where
we talk about web development, web design, and more.

Jason: In this episode, we’ll be talking about HTML5 API’s, responsive
background images, and our app of the week is Sequel Pro. Nick
Pettit is out this week due to a bizzare faux hawk accident. So
let’s get going. [music from 00:00:21 to 00:00:28]. First up
this week is a project called Backbone.Viewkit.
Backbone.Viewkit is a Backbone.js plugin for managing views and
transitions, and it’s primarily targeted towards for mobile
devices. If you’ve seen a project like jQuery Mobile, this
gives you very similar transitions to use on your websites.

Jim: Sort of like move the pages side to side and all those slick things
from IOS?

Jason: Yep; just like that. What they’re trying to do is really
approximate more of what a native mobile application is going to
look like. It doesn’t give you too much stuff to work with in
the way of fluff but we have a little demo that you can see on
the site itself on a jsFiddle right here. They have a top
navigation bar, as well as a view right below it, and then you
can see as you click between these different views, it slides
around using Backbone.js to just render your different views and
manage these very easily for you. So this is a really neat
plugin; you can check it out. We’ll have a link to it in the
show notes. It’s over one GitHub.com.

Jim: Very cool. So, I’ve got a cool tool called the Noise Texture

Jason: That does sound cool.

Jim: It does exactly what it says actually; it generates noise texture.
The reason this is cool is it allows you to update the opacity
and manage the noise density, and what this is good for is it
will allow you to create a background on your site with some
very subtle sort of noise on it, which really is something that
is super noticeable, but it’s a nice little effect that you can
have to, sort of, break up the page using CSS. So, basically,
you can have a color either defined directly in the image, which
you can see here, or you can have it actually be a transparent
noise texture and then overlay it on a CSS-colored background so
it can be a little more dynamic. You can adjust the size of it
and then it exports as a PNG, which is pretty cool, and then you
can just use it on your site.

Jason: Really nice; it kind of ties the room together.

Jim: Yeah, it’s a little thing.

Jason: So next up, we’re going to be talking about five HTML5 API’s
that you didn’t know existed. I find that a little bit
presumptuous and I’m just going to say that you may not have
known that these API’s existed. This is on David Walsh’s blog,
which he’s called, “The David Walsh Blog”. So a few cool things
that you can work with with HTML5 is the full screen API.
Different elements can request that your browser go full screen.
This does require user approval and permission, so you can’t
just launch your website full screen. We all remember how
popups went back in the late ’90’s.

Jim: Probably a good feature.

Jason: Yeah. Next up is something called the Page Visibility API.
This lets you listen in on events, like when a user focuses on a
pages tab or if a page is up in another window. Now, I’m not
entirely sure if this lets you focus on a page when somebody
navigates away from it or its hidden, because I think that would
be a great time to play a background sound like, ‘Hey, come back
to me on this page that you were looking at’. I mainly find all
these useful for different pranks. There’s also the GetUser
Media API, which lets you use the MacBooks camera, as well as
the Battery API, and link prefetching. If you want more
information on these, as well as code samples, check out the
link in our show notes, which you can find at

Jim: Yeah, it all seems like pretty good prank technology, like the webcam
which is pretty scary.

Jason: Yeah. You know, I like that we’ve evolved the web to a point
where we have so many options for pranking people when they go
to our website.

Jim: Well, I’ve got something that’s not really very prankworthy but it’s
a great article from Rolph Timmermans about responsive
background images with fixed or fluid aspect ratios.

Jason: Oh, cool.

Jim: It’s a description of how to create responsive images that have
aspect ratios that either stay the same that as they resize
through the responsive spectrum, or you can even set it up so
that the aspect ratio will change as the page resizes. The way
that they’re doing this is instead of having an image, using a
figure and setting the actual image as the background image and
then using the actual sizing of the figure all in itself. By
using some CSS and some math, you can set the aspect ratio so it
appropriately sizes as you go on through. At the bottom, he
also has some SCSS code, which allows you to do all of the
calculations in code, instead of actually typing it into your
calculator and hardcoding it into your CSS, which is pretty

Jason: That’s pretty clever by using the figure to do the background

Jim: It’s still semantically correct, I guess, although if background
images don’t work, which I guess is pretty much a problem that’s
not a problem anymore. especially if you’re worrying about
responsive design. It should be pretty compatible, so I wouldn’t
really worry about it.

Jason: It’s still a pretty neat solution.

Jim: Yeah.

Jason: Next up is our app review. Our app review this week is an app
called SequelPro. This is going to let you manage your isql
databases on Mac OS10 or OSx, as some people say. Now this
provides a nice little GUI for interacting with your MySQL
database. This is going to be different from a project, like
PHP MyAdmin, in that it’s working only your local computer. So
here’s what it looks like: this is just a little test database
with a test table that I have up on my local machine here, and
as soon as you select the table, it shows you all the different
fields that you have in the database, and then you can even add
more fields as you go on. If you want to add an integer, go
ahead, and then here’s another thing: other field. It even
provides you a little drop-down, just giving you all the
different options for table columns. You can even check out the
content in the database, and just double-click to add different
content. It gives you a really nice way of working with
databases on OS10. There’s more options, like viewing different
table info’s and even doing custom queries from right inside the
GUI. We’ll have a link to this in the show notes. I believe
you can get this at Sequelpro.com. It’s completely free;
they’re not sponsoring the show because it’s free, but you can
donate if you like the project. Once again, that’s at
Sequelpro.com. It’s kind of a neat thing.

Jim: Yeah. Usually I’ve seen a lot of those project that try to manage
the database in the GUI and a lot of them can be pretty janky,
but that one looked like it was pretty smooth, pretty well
designed, and easy to use so I decided to try it out.

Jason: Yeah, it’s pretty nice. Next up, we have a project called
Editable for Bootstrap. This is a set of Javascript plugins
that work with Twitter Bootstrap to let you do an approximation
of in-place editing with different fields. So, here’s an example
that they have on the site: there’s a field for username. You
can actually click in there and then change it to something
else, click the little check button and it edits right in place
and updates the HTML client side. This works with all sorts of
different field types, including dates; it gives you a little
date popup, click the check mark, and weight pretty much
anything you need. There’s also a ton of different events that
you can hook into and it’s pretty easy. It works with jQuery
and Bootstrap greater than or equal to 2.0.4.

Jim: So is it actually editing form fields and the idea is to submit that
through, or is it actually editing in-place content and then
you’d have to handle it in the Javascript?

Jason: It’s editing in-place content and then you handle that in the

Jim: So you have a callback with a new contact and you can use Ajax, or
something to update the server or page.

Jason: Yeah. And it gives you great and pretty thorough API to work

Jim: That’s pretty cool. Well, I’ve got a great jQuery plugin.

Jason: Sweet.

Jim: It’s called jPanel Menu.

Jason: What does that do?

Jim: It creates a panel menu in jQuery, hence the name.

Jason: Wow. I don’t get the name but, okay.

Jim: Everything cool starts with a ‘J’.

Jason: Agreed.

Jim: If you’ve ever used the mobile apps for Facebook or Google, you’re
probably familiar with that little menu that’s behind the
application, you either slide it or hit a little button and it
comes out in a little list. Well, this allows you to make it
pretty easily. You install it and then you click the button,
and your whole page moves to the side and you have a nice, well
designed little menu that you can click, and then there are just
normal links, and you can just move it right back. It even has
animations. It’s pretty cool. The only thing that I’d say to
watch out for is that the way that it works is when it’s
activated, it will actually take all the content from your body
and move it into a dib, which it then moves to the side. So if
you have any Javascript or CSS that is expecting (inaudible
[00:09:16]) to be directly in the body, it is slightly changing
your structure so you may have to watch out for that.

Jason: Gotcha. Good tip, cool plugin. I really like it.

Jim: It’s pretty cool.

Jason: So, finally, we’re going to wrap this up by a blog post on what
every programmer absolutely, positively needs to know about
encoding, and codings, and character sets when working with
text. This is a very, very thorough blog post that provides a
fantastic introduction to what’s actually happening behind the
scenes, on your computer, when you interact with any kind of
text in a programmatic way. It’s not a simple as just writing
single letters and characters to the screen. We have all sorts
of different codings and encoding styles.

Jim: So, again, the ones and zeros, you have to have some sort of way of
defining what ones and zeros mean what, right?

Jason: Yep, exactly. So this is not something we’re going to cover
completely on the show, but we do want you to read this whole
thing because there is going to be a quiz next week on The
Treehouse Show, Episode 19.

Jim: Alright. Prepare yourself.

Jason: Definitely be prepared. So that’s it. That’s all we have for
this week. Jim, who are you on Twitter?

Jim: I’m JimRHoskins on Twitter.

Jason: And I am @JSeifer. If you want more information on anything
that we talked about this week, head on over to our YouTube
channel at YouTube.com/GoTreehouse.

Jim: This episode was brought to you by Treehouse, the best way to learn
how to design and develop web applications, websites, and mobile
apps. Check us out at TeamTreehouse.com.

Jason: We’ll see you later.

Connect with Treehouse!
Website: http://www.teamtreehouse.com
Twitter: http://trhou.se/treehouse-twitter
Facebook: http://trhou.se/treehouse-facebook
Google+: http://trhou.se/treehouse-google-plus

Each week, we’ll release:

– New episodes of ‘The Treehouse Show’ – up to date news and tips on web design, coding, and more.
– ‘Quick Tip’ videos – these are short how-to videos on today’s most relevant web technologies.
– and much more!


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop