Saving State in Javascript and AJAX

We're doing something cool in work, to do with resource scheduling in a nice ajax-y, jQuery-UI-ey way.  There are a set number of filters to apply to get the view of the resources you want, which can include Department (for example, Development, Front-End, Client Services, Marketing), the Employee themselves, Employee Roles to show Senior Developers etc, Client and Project. The problem was, these are all filtered via AJAX, and refreshing the page would cause you to lose your filters.

One way that developers solved this was by keeping the state in the "hash" portion of the URL.  The most prevalent method of this was called the "Hashbang" which would add the hash (octothorp) and an excalamation point (! - the "bang").  This is easy but could lead to messy / long URL.

Another method that is pretty convenient is to set a cookie containing the parameters. The downside of this is you can't send the same view that you're looking at to a coworker. That cookie is on your computer only.

I couldn't decide which one to implement so I decided to do both.

    var serializers = {};

    serializers.hash = function(){
        this.serialize = function(str){
            window.location.hash = str;
        };         this.prepDeserialize = function(){
            var hash = window.location.hash;
            return hash == null || hash.indexOf("#") != 0 ? "" : hash.substring(1);
        };
    }     serializers.cookie = function(){
        this.serialize = function(str){
            window.Cookie.set("ajaxState_serialize", str);
        };         this.prepDeserialize = function(){
            return window.Cookie.get("ajaxState_serialize");
        };
    }

I have a cookie helper class which wraps what you can find on quirksmode.org.  If you want to use this code, you can provide your own cookie serializer, your own custom serializers, or whatever, without changing the rest of the code.

The rest of the code is just adding and subtracting values from the serialized data. To call it, it's simply this:

                var data = $.fn.projectFilter.getFilterData($wrap);
                window.AjaxState.serialize(data, true);

So you get the filter object and serialize it. The true on the call to serialize just says to "commit it", which means to write the data to the cookie or the hash on the same call. I've put this code up on this site, you can download it.

Javascript Functional Programming

In work, I was recently tasked with a data comparison project. A bunch of data was getting duplicated. These records include user first and last names, their phone, email, company.  The master file was a list of these same users but they were assigned "card id" because they were already customers.

The method was to find a match for name (first and last) and if the email didn't match, then separate it out. Then find a match for email, and if the name didn't match, separate it out.

You can imagine this logic:

Go through each line... 
var matches = core.filter(function(a){ return a.firstName == line.firstName && a.lastName == line.lastName; }); // match names 
if (matches.length == 1){ var matchingEmail = matches.filter(function(a){ return a.email == line.email; });
    if (matchingEmail.length == 1){ add it to results }
     else separate it out;
}

And do the same, checking email first. The main feature of Object Oriented Programming is to abstract out data and functionality so that different objects can behave the same way in a system. The main idea of functional programming is that the process can be abstracted out.

What I'm basically doing is, match the line to the map based on some values, if there are any matches, find matches within that result which match some other value. If that result is 1, then we've found a good match, and repeat with the comparison methods swapped.

Or, even more abstractly... running a comparison function, getting results, and running another comparison function to filter the results further.

Let's define our comparison functions:

var compareName = function(a) { return a.firstName == line.firstName && a.lastName == line.lastName; };
var compareEmail = function(a) { return a.email == line.email; };

We can create a method to run these comparisons. It will need the line, the master list, and the two comparison functions.

function compare(line, masterList, comparison1, comparison2)

And then we can call it like so:

compare(line, masterList, compareName, compareEmail);
compare(line, masterList, compareEmail, compareName);

Voila!

I should write more Node.js posts

They are consistently my top rated posts from an SEO standpoint. Also, according to Google Analytics, they lead to an average of a good 5 minutes on the site.  I will come up with more, but I feel like I'm not doing anything noteworthy or extraordinary with Node.js at the moment. I've put a lot of time and coding into the foundation of my site and other sites I've written, and I've already written a lot about building up that foundation.  I will come up with some other stuff to write about, it's what the people want!