17
Dec 11

FBAPI.js: Facebook JavaScript SDK Simplified

Facebook Open Graph logo

I’ve been working on Rembly using several javascript libraries: Spine.js, Mustache.js, ICanHaz.js, and Facebook’s JavaScript SDK. These have made application development easier, but not always easy enough! I wrote previously about my enhancements to ICanHaz.js for loading Mustache templates. This time around, I wanted to use Facebook’s JavaScript SDK with less “overhead” and a simplified API.

I created FBAPI.js to handle the setup requirements that Facebook’s SDK requires, such as adding a “root” tag to the page before loading the SDK. Now FBAPI.js takes care of all the SDK requirements and lets you use the Graph API without worrying about the overhead. FBAPI.js adds helper methods for event binding and retrieving user data.  However, the best part of FBAPI.js is that you don’t have to wait for the page or javascript dependencies to be loaded before you can start using it! All methods use promises and callbacks. This lets you run your scripts in any order you want!

Check out the Github repository and let me know what you think!

Share

12
Dec 11

Easily Overload JavaScript Functions with Optional Parameters

Overloaded

I just answered a Stack Overflow question from a couple years ago titled “Handling optional parameters in javascript” and figured I’d write about my solution here.

I’ll start by saying that the easiest way to handle optional parameters in javascript is to use an “options” object that allows a function to be called with as many or as few parameters (arguments) as you wish.

function displayOverlay(options) {
  if (options.alert) { 
    alert(options.message); 
  }
}

However, if you need to use individual parameters, i’ve created a utility that acts as a proxy and lets you strongly type values.  It looks like this:

function displayOverlay(/*message, timeout, callback*/) {
  return proxy(arguments, String, Number, Function,
    function(message, timeout, callback) {
      /* ... your code ... */
    });
};

I call my proxy arrangeArgs(). Here’s a clearer explanation of what’s going on:

function displayOverlay(/*message, timeout, callback*/) {
  //arrangeArgs is the proxy
  return arrangeArgs(
           //first pass in the original arguments
           arguments,
           //then pass in the type for each argument
           String,  Number,  Function,
           //lastly, pass in your function and the proxy will do the rest!
           function(message, timeout, callback) {

             //debug output of each argument to verify it's working
             console.log("message", message, "timeout", timeout, "callback", callback);

             /* ... your code ... */

           }
         );
};

I created the arrangeArgs() proxy to handle optional parameters for you.  It works nicely.  The code is in my Sysmo.js utility library on GitHub. Let me know what you think!

Share

05
Dec 11

A Super-Charged Version of ICanHaz.js

Blueprint

I’ve been working on Rembly, which uses Spine.js as the core piece that ties all the functionality together.  I decided to use Mustache.js for my HTML templates.  And finally, I chose ICanHaz.js as a simple and lightweight way of managing my HTML templates.

Although ICanHaz.js is a great start, managing my HTML templates became unwieldy because I started having little templates everywhere.  Each part of a page that is dynamically updated needs to be broken out into its own template.  When you’ve broken a web page into small parts, it’s hard to keep track of what it looks like when put back together.  It also becomes hard to create the correct CSS styles when you lose track of the HTML hierarchy.

This lead me to enhance ICanHaz.js with a ton of new features.  The primary one being nested templates, which allowed me to keep my full HTML page template in tact, while designating specific HTML tags as “sub templates” or partials. You can also specify additional templates to load and replace script “include” tags with the loaded HTML.

Check out my fork on Github for more information about how to use my enhanced version if ICanHaz.js. Make sure to look at the javascript comments for details. And let me know what you think.

Share