zerg.js

Date.prototype.fromThen = function() {
  // returns the tiered difference of the date and the current date
  var now = new Date();
  var difference = now.getTime() - this.getTime();
  var years = Math.floor(difference / (1000 * 60 * 60 * 24 * 12 * 365));
  var months = Math.floor(difference / (1000 * 60 * 60 * 24 * 12));
  var days = Math.floor(difference / (1000 * 60 * 60 * 24));
  var minutes = Math.floor(difference / (1000 * 60 * 60));
  var hours = Math.floor(difference / (1000 * 60));
  var seconds = Math.floor(difference / (1000));
  var milliseconds = difference - seconds;
  return [
    years
   ,months
   ,days
   ,minutes
   ,hours
   ,seconds
   ,milliseconds
  ];
};

Date.prototype.ago = function() {
  var text = '';
  var fromThen = this.fromThen();
  if (fromThen[0] > 0) {
    text += fromThen[0] + ' year';
    text += (fromThen[0] > 1) ? 's' : '';
  } else if (fromThen[1] > 0) {
    text += fromThen[1] + ' month';
    text += (fromThen[1] > 1) ? 's' : '';
  } else if (fromThen[2] > 0) {
    text += fromThen[2] + ' day';
    text += (fromThen[2] > 1) ? 's' : '';
  } else if (fromThen[3] > 0) {
    text += fromThen[3] + ' hour';
    text += (fromThen[3] > 1) ? 's' : '';
  } else if (fromThen[4] > 0) {
    text += fromThen[4] + ' minute';
    text += (fromThen[4] > 1) ? 's' : '';
  } else if (fromThen[5] > 0) {
    text += fromThen[5] + ' second';
    text += (fromThen[5] > 1) ? 's' : '';
  } else if (fromThen[6] > 0) {
    /*
    text += fromThen[6] + ' millisecond';
    text += (fromThen[6] > 1) ? 's' : '';
    */
    text += 'just now';
  } else {
    text += 'just now'; 
  };
  if (text !== 'just now') {
    text += ' ago';
  };
  return text; 
};

whenReady

whenReady is syntactic sugar for creating an arbitrary conditional polling callback mechanism using a combination of the Command and Observer patterns. it is configurable, meaning you can pass in stuff like polling interval, retries, etc. you can get it here.

It is very useful for readability when you have a lot of chained callbacks and essentially a complex javascript application. Some obvious benefits are for checking to see if some DOM loaded, to find out if a Flash object with externalinterface is accessible, to see if an image has loaded, to use an observer pattern to externally check if some AJAX or XHR call has completed, and so on.

    the callback.                                     cb : f(){}  (req)
    the condition to satisfy before callback.  condition : f(){}  (req)
    the polling interval.                   pollInterval : #      (opt)       
    number of retries before giving up        retryCount : #      (opt)
    the callback arguments                        cbArgs : []     (opt)
    the arguments passed to the condition  conditionArgs : []     (opt)

example

    // when element  is loaded dynamically, it will
    // receive the class fast_n_snappy 
    whenReady({
      cb: function(slowNDumpy) {
        slowAndDumpy.className = 'fast_n_snappy';
      },
      condition: function() {
        var someElem;
        if (someElem = document.getElementById('slowNDumpy')) {
          return someElem;
        }
        return false;
      }
    })();

you can also create a whenReady function and use it later, useful when you have a lof of callback chaining

    // when element  is loaded dynamically, it will
    // receive the class fast_n_snappy 
    var doStuff = whenReady({
      cb: function(slowNDumpy) {
        slowAndDumpy.className = 'fast_n_snappy';
      },
      condition: function() {
        var someElem;
        if (someElem = document.getElementById('slowNDumpy')) {
          return someElem;
        }
        return false;
      }
    });

    // wait a second, then start the whenReady polling
    setTimeout(doStuff, 1000);

Here is a solution that works for browsers that are not made by Microsoft. I will have a cross-browser solution soon using this algorithm. Code is on https://github.com/mawkor2/grepNodes so hopefully someone will beat me to it :).

Note, other examples I have seen are RECURSIVE which is potentially bad in javascript which can end in stack overflows, especially in a browser client which has limited memory for such things. A huge DOM tree can blow up your browser, cause javascript to stop executing, or just cause random weird stuff to happenin old browsers.

    function grepNodes(searchText, frameId) {
      var matchedNodes = [];
      var regXSearch;
      if (typeof searchText === "string") {
        regXSearch = new RegExp(searchText, "g");
      }
      else {
        regXSearch = searchText;
      } 
      var currentNode = null, matches = null;
      if (frameId && !window.frames[frameId]) {
        return null;
      }
      var theDoc = (frameId) ? window.frames[frameId].contentDocument : document;
      var allNodes = (theDoc.all) ? theDoc.all : theDoc.getElementsByTagName('*');
      for (var nodeIdx in allNodes) {
        currentNode = allNodes[nodeIdx];
        if (!currentNode.nodeName || currentNode.nodeName === undefined) {
          break;
        }
        if (!(currentNode.nodeName.toLowerCase().match(/html|script|head|meta|link|object/))) {
          matches = currentNode.innerText.match(regXSearch);
          var totalMatches = 0;
          if (matches) {
            var totalChildElements = 0;
            for (var i=0;i<currentNode.children.length;i++) {
              if (!(currentNode.children[i].nodeName.toLowerCase().match(/html|script|head|meta|link|object/))) {
                totalChildElements++;
              }
            }
            matchedNodes.push({node: currentNode, numMatches: matches.length, childElementsWithMatch: 0, nodesYetTraversed: totalChildElements});
          }
          for (var i = matchedNodes.length - 1; i >= 0; i--) {
            previousElement = matchedNodes[i - 1];
            if (!previousElement) {
              continue;
            }
            if (previousElement.nodesYetTraversed !== 0 && previousElement.numMatches !== previousElement.childElementsWithMatch) {
              previousElement.childElementsWithMatch++;
              previousElement.nodesYetTraversed--;
            }      
            else if (previousElement.nodesYetTraversed !== 0) {
              previousElement.nodesYetTraversed--;
            }               
          }
        }
      }
      var processedMatches = [];
      for (var i =0; i <  matchedNodes.length; i++) {
        if (matchedNodes[i].numMatches > matchedNodes[i].childElementsWithMatch) {
          processedMatches.push(matchedNodes[i].node);
        }
      }
      return processedMatches; 
    };

I came across a common problem when working on http://www.showzi.info/

The purpose: to create a custom mashup for events based on category type.

The method:  I needed to make a request for some JSON, take the results of that JSON and do several other requests based on the result. And maybe do that again a few times, in various orders. I could just make some procedural glob, but I realized I would have to do it at least 13 different ways for each category. In addition, the methodology of making the requests was going to require a lot of changes and tweaking to get the data that was most relevant.

So I thought, how can I do this in a generalized way?

From the program consumer’s perspective, you should be able to pass in a configuration object with all the relevant data for each request and some way to have requests sort of ‘talk to each other’.

This construct appeared to do the trick…

http://en.wikipedia.org/wiki/Futures_and_promises#Semantics_of_futures_in_the_Actor_model

So I messed around with a lot of different strategies and ended up with this…

var config = {
  a: {
    request: {
      options : {
        host: '127.0.0.1',
        port: 1337,
        path: '/'
      }
    }
  },
  b: {
   request: {
      options : {
        host: '127.0.0.1',
        port: 1338,
        path: '/',
        query : 'a=1'
      }
    },
    futures: {
      a: function(req, data) {
        req.options.query = 'a=' + data.a;
        console.log('changed query to ' + 'a=' + data.a);
      }
    }
  }
}

The idea is that a will make a request, and when a returns, b will take the data from a, modify it’s request parameters based on the result using a user-defined function, and make the subsequent request for b.

So this is nice for a simple example, but what about complex interactions, like, request b requires data from request a, and request c requires data from both a and b? You would construct it like this…

var config = {
  a: {
    request: {
      options : {
        host: '127.0.0.1',
        port: 1337,
        path: '/'
      }
    }
  },
  b: {
   request: {
      options : {
        host: '127.0.0.1',
        port: 1338,
        path: '/',
        query : 'a=1'
      }
    },
    futures: {
      a: function(req, data) {
        req.options.query = 'a=' + data.a;
        console.log('changed query to ' + 'a=' + data.a);
      }
    }
  },
  c: {
    request: {
      options : {
        host: '127.0.0.1',
        port: 1339,
        path: '/',
        query : ''
      }
    },
    futures: {
      a: function(req, data) {
        req.options.query = (req.options.query) ? 'a=' + data.a : req.options.query + '&' + 'a=' + data.a;
      },
      b: function(req, data) {
        req.options.query = (req.options.query) ? 'b=' + data.b : req.options.query + '&' + 'b=' + data.b;
      }
    }
  }
}

This is a very basic example of the capabilities. The idea is that if the futures property is defined in a request, each property of the futures object maps back to a different request and expects that request to finish before making its own request. The user defined function will be run with the data returned from the indicated request (just the property name) and a reference to its own request object.

Here is a simple example of usage…

var remix = require('./remix.js');
var config = {
  a: {
    request: {
      options : {
        host: '127.0.0.1',
        port: 1337,
        path: '/'
      }
    }
  },
  b: {
   request: {
      options : {
        host: '127.0.0.1',
        port: 1338,
        path: '/',
        query : 'a=1'
      }
    },
    futures: {
      a: function(req, data) {
        req.options.query = 'a=' + data.a;
      }
    }
  },
  c : {
   request: {
      options : {
        host: '127.0.0.1',
        port: 1339,
        path: '/',
        query :'b=2'
      }
    }
  }
};
var someNamespace = someNamespace || {};
someNamespace.myData = null;

var jj = remix.remix(config1);

jj.wire();
jj.events.on('complete', function(data) {
  someNamespace.myData = data;
  console.log(someNamespace.myData);
});
/*
  myData is now 
  { a: <data from a>
  , b: <data from b>
  , c: <data from c, dependent on data from a>
  }
*/

I considered calling this jsonJoin because it’s similar in nature to a join, but remix sounded cooler.

Thoughts and feedback?

Please fork, there are all kinds of further applications of this concept - XML capability, mongoDB integration (it would be awesome to use in a mongoDB for join-like operations).

The concept is similar to what Yahoo! Pipes does. It doesn’t do filtering or transforms, it doesn’t give you a snazzy ui, it’s node.js only and it only works on JSON (at the moment), however, it has far greater power in resolving request chain dependencies, and you can always do your filtering after the fact. And it could support XML and other data formats eventually and have a snazzy UI (I’m hoping it’s simple enough to use not to predicate a ui necessity though).

Code is here. Enjoy!