Jason Mooberry

I’ve been fascinated with Conway’s Game of Life for years now.  I love how there is an apparent order to things that is reproducible as well as simple in it’s requirements.  Recently there was a discovery that made the tech news about a new pattern that replicated itself.  I’ll be honest, the demo of the replicating code wasn’t as sexy as I had hoped.  But it did remind me how much I want to make this game.

I’ve been on a recent tear through javascript, browser and server side (node.js is just fun).  So I set out to build a little game of life with js and html.  jQuery aided with some of the lifting too.  :)

After a couple afternoons Geoff was born.  He’s a simple lad.  Just gives you the basics, but still fun to play with non-the-less.  I have only tested him on Chrome, FF, and Safari.  Interestingly this is a great way to see how fast your js engine is.  Chrome handles it the best on my laptop.  FF the worst.

A little bit about the code:

jQuery’s live() event handling is perfect for this situation.  Since I opted to turn a crap-ton of b tags into large pixels of my game grid, I needed to bind some mouseover/mouseout and click events to each item.  There is no need to do this to each of the ~2k tags.  Instead, using live(), jQuery will bind to the document and as events bubble up, check to see if they’re relevant to my event handlers.  This cuts memory usage as well as bind time.

Recursion with setTimeout().  Initially when I built this I was using setInterval() to fire my life function and advance Geoff another step.  On Chrome it was fast enough that I didn’t notice any problems.  But when I tested in Safari and FF, I found that I was “dropping frames” when I cranked up the speed.  This had weird effects.  So I used a recursive function that pauses at the end of it’s execution.  This will ensure that I don’t lose an iteration, while giving reasonable control over the speed of execution.

Pseudo-casting as integer.  This is a hack that I picked up from James Padolsey’s blog.  For my purposes it’s a nice way to take a boolean expression and convert it into a 0 or 1.

// sum up the active neighbors
active += ~~(typeof current[neighbors[j]] === ‘number’ && current[neighbors[j]] === 1);

Best practices.  I’ve violated them .. a bit.  :)

Well I hope you have fun playing.  I tried drawing moo and it lived a healthy and rich life.  ;)

Enjoy Geoff!

I’ve been working on a little web page widget for loading related conversations from gravity.com.  My goal was to require only a single script tag with a few attributes and that’s it.  However my code has a dependency on some fanciness in jQuery.  At some point it will make sense to write it all out in javascript, but right now I’d like to use jQuery.

So I need to remote load the jQuery library if it doesn’t already exist in this current page.  I looked around and found a few solutions, but I wanted a simple function that I could pass a callback to that ensured my code would execute or fail silently.  So I put together this function:

var ensureJQuery = function(callback) {
  // set our vars
  this.callback = callback;
  this.interval = 50;
  this.max_time = 5000;  // 5 seconds
  this.elapsed = 0;
  this.jquery_url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';

  // if jQuery is loaded, run it
  if (typeof jQuery == 'function') {
    return this.callback(jQuery);
  }

  // insert jquery load script tag
  var script = document.createElement('script')
  script.setAttribute('type','text/javascript')
  script.setAttribute('src',this.jquery_url)
  if (typeof script != 'undefined') {
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  // interval our check and run callback when jQuery loaded
  this.jquery_check = setInterval(function() {
    this.elapsed += this.interval;
    if (typeof jQuery == 'function') {
      clearInterval(this.jquery_check);
      return this.callback(jQuery);
    }
    if (this.elapsed > this.max_time) {
      clearInterval(this.jquery_check);
      return false;
    }
  },this.interval);
}

It’s not very complicated. It checks if jQuery is a function in the current environment. If not it creates a script tag to load it. Then it waits until it’s loaded and executes the callback. It passes jQuery into the callback so you can set it to $ and know that you won’t have any conflicts.

Here’s a basic usage:

ensureJQuery(function($) {
  alert('jQuery version '+$.prototype.jquery+' is loaded!');
});

It’s a pretty simple load and works nicely for my application.

You can download the latest version of this code at: http://github.com/jasonmoo/jQuery-dynamic-loader

Hey so I just wanted to post a quick bit of code that I put together for the character counter we’re using at gravity.com.  It’s pretty simple but it does the trick.  I’m binding to two key events here to ensure that we get a counter update when you hold the key down as well as on key up.  Hope it serves you well.

http://github.com/jasonmoo/jQuery-character-counter