Using OAuth 2.0 for Google APIs

OAuth has become an incredibly popular way to manage authentication and authorization for apps — mobile, desktop, and web. What is OAuth? Well according to the OAuth site OAuth is…

An open protocol to allow secure authorization in a simple and standard method from web, mobile and desktop applications.

Well, to be honest that’s pretty general and might not exactly clear everything up if you’re new to OAuth. Don’t worry though. In what follows, we are going to show some really simple implementations in a couple of different languages that will hopefully help you get a better grasp on what OAuth is and whether or not it’s a good choice for you to use on your website or in your application.

Read More »

Backbone.js Collections

Collections have a bunch of different usages in Backbone.js, but at their core they are basically arrays of models. If you are unfamiliar with Backbone models it might be a good idea to check out post on Backbone.js Models It’s a fairly quick introduction so it shouldn’t take too long to consume.

Collections, being groups of models, are good for displaying lists of data. So if you wanted, for example, to display a list of musical artists, the model would be an “Artist,” containing the artist name, birthday, hometown, favoriteColor or any other information that we’d want to use in our application, and the collection (array of models) would be “Artists.” To create a collection as an ordered set of models you have to specify which type of model your collection holds by setting the model property.

var Artists = Backbone.Collection.extend({
    model: Artist
});

Again for demonstration, we’re going to actually need some models to use our collection. So let’s create one with some defaults (which we’ll be overriding anyway).

var Artist = Backbone.Model.extend({
    defaults: {
        name: 'New Artist',
        birthday: 'January 1, 1970',
        hometown: 'Los Angeles, CA',
        favoriteColor: 'blue',
    }
});

Now to instantiate a few models….

var biggie = new Artist({ id: 1, name: 'Notorious BIG', birthday: 'May 21, 1972', hometown: 'Brooklyn, NY', favoriteColor: 'green' });
var mike = new Artist({ id: 2, name: 'Mike Jones', birthday: 'January 6, 1981', hometown: 'Houston, TX', favoriteColor: 'blue' });
var taylor = new Artist({ id: 3, name: 'Taylor Swift', birthday: 'December 13, 1989', hometown: 'Reading, PA', favoriteColor: 'red' });

Note: When developing Backbone applications (or any other application for that matter) you’ll want to give your models an id property. It makes things much easier when working with lists and they’re required for doing any sort of retrieving and/or saving models from the database using the fetch and the save or sync methods.

Read More »

Backbone.js Models

Models in Backbone.js are the “data houses” for Backbone applications. They hold the data that gets fetched from the server and they get passed to the Backbone Views so that the views can display them. When users create or update data (by filling out a form and clicking a button or by some other means), that data will be housed within a model and then sent up to the server for processing.

To define a Backbone model, you have to simply have to extend the Backbone Model.

var Artist = Backbone.Model.extend({});

And then to use it we could create a new insatance…

var artist = new Artist();

Read More »

jQuery Isotope Tutorial

I love jQuery Isotope from Metafizzy. As a longtime fan of the Springfield Isotopes, who wouldn’t love an isotopes jQuery plugin? I’ve enjoyed it so much that I bought the developer license so I could use it for my own commercial applications and themes. It’s an outstanding plugin and a lot of the popular templates and themes on sites like Theme Forest use it to create things like filterable portfolios or display content in other dynamic ways.

The Isotope homepage is awesomely flashy and shows some slick implementations on how you can use the plugin. However, because there is a lot going on there on the page, I think there’s the potential that it might be a bit challenging for users who are new to jQuery to find the simplest way to use it in the code examples. There is a lot of styling and code to sift through. Perhaps, it comes down to a matter of personal preference, but I’m more of a fan of the “Start really simple and plain and then build up from there” approach. So I thought I’d show a really simple, very vanilla example of jQuery Isotope so that you can get it up and running in your own applications as soon as possible. You can add more complexity and styling from there if you so desire. The demo of what we’ll be creating and the corresponding download are below…

View Demo Download Files

We’ll be creating a filterable portfolio-style implementation using jQuery Isotope.

Read More »

Backbone.js Views

In the following segment, we are gong to look at views in Backbone.js.

The files for demo and download for the following discussion can be found below if you’d like to follow along…

View Demo Download Files

What is a View?

As the name suggests, a “view” has to do with something you “view” on your screen (wow, what a concept!) :). But if you have done any programming in other languages before and you’re familiar with the Model View Controller software design pattern, the same pattern that Backbone.js follows (albeit very roughly), sometimes you have to take a moment to think about what is being referred to when talking about a view. Often times when you think of a “view” in an application framework such as CodeIgniter, ASP.NET MVC, or Django you tend to think of an entire rendered page of output (at least I do). Yes there are things like “partial views” and other components of MVC that don’t necessarily mean that a view is an entire rendered page, but that is just the tendency that I gravitate towards. When you are returning a view in frameworks such as those, you are often doing so in response to a browser’s request and routing them to a particular web page.

Read More »