Due to a number of requests I have cleaned up and decided to release the code for FT2JSON under the Apache license so others can make use of the software for specific applications.

The code can be found here:

https://github.com/jordoncm/ft2json

The main app engine site will of course always be hosted:

http://ft2json.appspot.com/

I have been messing around with Google Fusion Tables a lot over the past few months and I really like the service. However it really bothered me that the only format that the response data came in was CSV. I also wanted to be able to work with Fusion Tables query data entirely on the browser/client side. So I spent part of the weekend writing an application that proxies Fusion Tables API queries and transforms them from CSV into JSON. I also added a simple Javascript that you can embed on your page and then make Fusion Table queries directly from Javascript.

I posted the application on App Engine and you can find it here: http://ft2json.appspot.com

I wrote it in Python and used Tornado Web Server to help parse requests. Tornado works quite well within App Engine.

I am playing with CouchDB a bit this weekend and I am trying to put together a basic application written in HTML and Javascript.

I wanted to use the XMLHttpRequest object to interact with CouchDB; this meant I had to host the code using the web server that is built into CouchDB (to avoid cross domain issues in the browser). However when I first moved the code over from my normal Apache server into the CouchDB server I tried to access the code with my browser at http://localhost:5984/_utils/myapplication and none of my external CSS or Javascript files would load (at least in Firefox).

What I noticed was that since I was using relative paths in the href and src attributes (i.e. <script scr="./file.js" ...) of the link and script tags, the trailing slash on the URL was required for the files to be included properly. I figured this out because when I accessed the same code at http://localhost:5984/_utils/myapplication/, everything worked as expected.

Typically web servers add that slash automatically for you, but for some reason CouchDB does not. To get around this I wrote a quick Javascript that I placed inline, just below the head tag to look for this case and correct it. The script is below.

if(String(window.location).substring((String(window.location).length - 1), String(window.location).length) != '/') {
    window.location = String(window.location) + '/';
}

Seems odd that CouchDB does not account for this.

I have been working some with the Gadget Spec and developing gadgets for use on closed networks. I have been using Shindig to render my gadgets and it is really big on caching gadgets for performance. This is quite annoying when you are developing and tweaking a particular gadget because your changes don't get shown like they should when you refresh the browser.

Anyway, it turns out there is a simple fix for this. Normally you call a URL similar to this to render you gadget in Shindig.

http://your-shindig-server/gadgets/ifr?url=http://url/to/your/gadget.xml

To get Shindig to bypass its cache and pull the latest gadget code all you have to do is add a bpc=1 to the URL query string.

http://your-shindig-server/gadgets/ifr?bpc=1&url=http://url/to/your/gadget.xml

This makes working on a gadget a lot less painful.

Here is a Javascript function that I threw together the other day that will take the default format of a MySQL DATETIME or TIMESTAMP field (YYYY-MM-DD HH:MM:SS) and convert it into a Date object in Javascript.

function parse_date(string) {
    var date = new Date();
    var parts = String(string).split(/[- :]/);

    date.setFullYear(parts[0]);
    date.setMonth(parts[1] - 1);
    date.setDate(parts[2]);
    date.setHours(parts[3]);
    date.setMinutes(parts[4]);
    date.setSeconds(parts[5]);
    date.setMilliseconds(0);

    return date;
}

Here is a couple of query string parsing functions I put together in Javascript today. This first one will parse the current query string and return an object with properties for each of the arguments in the query string.

function parse_args() {
    var args = new Object();
    var query = window.location.search.substr(1).split('&');
    var tmp = null;

    for(var i = 0; i < query.length; i++) {
        tmp = query.split('=');
        args[tmp[0]] = tmp[1];
    }

    return args;
}

This second function will find an argument in the query string by name and then return the value, if it exists. If the argument is not found it will return false.

function find_arg_value(name) {
    var query = window.location.search.substr(1).split('&');
    var tmp = null;

    for(var i = 0; i < query.length; i++) {
        tmp = query[i].split('=');
        if(tmp[0] == name) {
            return tmp[1];
        }
    }

    return false;
}

One of the lesser known features of Cascading Style Sheets is the ability to apply more than one class to a single element. Browser support for this is pretty good and goes back at least as far as Internet Explorer 6. I needed to put this feature to use, so I did a few experiments on how it works and thought I would share my notes here.

To give an element more than one class you just separate the class names with spaces. Below is an example of a div with three classes.

A couple of things I found about using multiple classes are:

1. The order of the classes makes no difference. class="one two" is the same as class="two one". Standard inheritance applies and if the classes are at the same level of inheritance (i.e. both classes are defined in style tags) the class that is defined last will have its rules take priority.
2. In Javascript, the className property returns all class names in a string (getAttribute('class') returns the same, doesn't work in IE6).
3. Also in Javascript if you are looking for a particular class it can be handy to use split to divide the className property into an array.

   String(document.getElementById('test').className).split(' ')

You can see the example code in action by clicking here. Take a look at the source to see how the multiple classes interact and override each other the generate the final look of the div.

I found this code snippet in a four year old email that I had sent myself. This is the basic code layout that I use for form validation. What is nice about it is that it will parse the whole form and compile a list of all the form validation errors to present to the user at once, instead of presenting it to the user one field at a time and making them hit the submit button over and over again to get the form right.

function verify() {
    var valid = true;
    var info = "Please correct the following:";

    // Below are some example tests that can make the valid flag false and
    // add text to the error message.

    if(document.getElementById('name').value == "") {
        info += "\n - enter your name";
        valid = false;
    }

    if(document.getElementById('zip').value.length != 5 ||
       document.getElementById('zip').value.match(/[^0-9]/g) !== null) {
        info += "\n - zip must be five numbers";
        valid = false;
    }

    // The above are just examples you can add as many tests as you want.

    if(!valid) {
        alert(info);
    }

    return valid;
}

The validation function maintains a flag that tracks whether any errors have been found. You can do as many tests on the form as you want and keep adding to the error message so the user can see everything that is wrong with the form all at once.

Lately I have been doing a lot work with passing data back and forth between Javascript and PHP and I often am working on arrays on the Javascript side and there is no easy native method to test whether an array contains a certain value. So I wrote my own.

function in_array(needle, haystack, strict) {
    for(var i = 0; i < haystack.length; i++) {
        if(strict) {
            if(haystack[i] === needle) {
                return true;
            }
        } else {
            if(haystack[i] == needle) {
                return true;
            }
        }
    }

    return false;
}

You could also prototype it to be built in to the native Array object. You just have to tweak the code a little.

function in_array(needle, strict) {
    for(var i = 0; i < this.length; i++) {
        if(strict) {
            if(this[i] === needle) {
                return true;
            }
        } else {
            if(this[i] == needle) {
                return true;
            }
        }
    }

    return false;
}

Array.prototype.in_array = in_array;

// example usage

var test = new Array();
test.push('i');
test.push(1);

test.in_array('i'); // true
test.in_array('i', true); // true
test.in_array('b'); // false
test.in_array(1, true); // true
test.in_array('1', true); // false

The other day someone asked me how to validate a multiple select on a form in Javascript. They needed to check that the person filling out the form at least chose one option. This is what I came up with off of the top of my head.

Here is a basic multiple select.

Red
Orange
Yellow
Green
Blue

Here is the Javascript function code that you can pass a reference to a select to and it will return true if one or more options are chosen, otherwise it will return false.

function multiselect_validate(select) {
    var valid = false;
    for(var i = 0; i < select.options.length; i++) {
        if(select.options[i].selected) {
            valid = true;
            break;
        }
    }

    return valid;
}

Here is an example of how you could call the above function on a select.

// referencing the select above by id
multiselect_validate(document.getElementById('color'));

The example above is a little limited in that it will only ensure that at least one option is chosen. It wont work if you need to check that at least two (or more) options are selected. This modified function can take an additional argument to specify how many options need to be selected.

function multiselect_validate(select, num) {
    if(!num) {
        num = 1;
    }

    var valid = false;
    var found = 0;
    for(var i = 0; i < select.options.length; i++) {
        if(select.options[i].selected) {
            found++;
            if(found == num) {
                valid = true;
                break;
            }
        }
    }

    return valid;
}