Idle Hacking

DOM.ensure( function(){
   $("node").observe("click",method1);
});

If we decide that we want to cache that markup and reinsert it back into the DOM later we’re still safe. If we had used the DOMReady approach our code would have needed to be much more complex to track when it’s ok to call the method and when it needs to be called in the event. This method is really away of letting us say we want to ensure that this block of code is not executed until the DOM is really ready.

Here’s a solution I created for implementing DOM.ensure.

DOM = Class.create();
Object.extend(DOM,{
  callQueue: $A([]), // store all calls in this queue
  isReady: false,
  // make sure the DOM may be effected before calling this method
  // if the DOM is ready then the method is called right away, else a timeout is set
  // until the DOM is ready
  ensureDOMIsReady: function(callback)
  {
    if( DOM.isReady ){
      callback(); // call the method now
    }
    else{ // delay the call until the DOM is ready
      DOM.callQueue.push( callback );
    }
  },
  initialize: function() // call any methods that were queued up to be run when the DOM is ready
  {
    DOM.isReady = true;
    var queue = DOM.callQueue;
    while( queue.length > 0 ){
      queue.pop()();
    }
  }
}); 

// detect DOM ready once for the whole page for each specific browser type
if( Prototype.Browser.IE ){
  document.onreadystatechange = function(){
    if( document.readyState == "complete" ){
      DOM.initialize();
    }
  }
}
else if( Prototype.Browser.WebKit ){// safari 2.0
  var _timer = setInterval(function() {
  if (/loaded|complete/.test(document.readyState)) {
    clearInterval(_timer);
    DOM.initialize();
    }
  }, 10);
}
else if( document.addEventListener ){
  document.addEventListener("DOMContentLoaded", DOM.initialize.bind(this), false);
}

Really it’s a change in the calling semantics for a DOMReady to think of it as more of a question of whether or not the DOM is ready for me to manipulate it.

Software DOM, Javascript

I’ve been doing a lot of thinking about how to use xul templates to generate a nice display of an rss feed. I decided I might be able
to get further using Javascript. In fact after writing a little code
to fetch the rss document and grab the fields in javascript I think
this approach isn’t half bad.

Here’s what I’ve come up with:

// a global array of each RSSFeedvar gFeeds = new Array();
// loads a resource file listing each rss feed we're
// tracking
// TODO: provide a callback for progress
function loadRSSFeeds(){
  // TODO: actually load this info from a file
  loadRSSFeed( gFeeds, "http://kernel.org/kdist/rss.xml", true );
}
// TODO: provide a callback for progress
// load a single RSS Feed, non blocking
function loadRSSFeed( feeds, feedURL, display ){
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function(){
    if( xmlhttp.readyState == 4 && xmlhttp.status == 200 ){
       var feed =  new RSSFeed( xmlhttp.responseXML );
       feeds.push( feed );
       if( display )
         feed.show();
    }
  };
  xmlhttp.open( "GET", feedURL, true );
  xmlhttp.overrideMimeType("text/xml");
  xmlhttp.send(null);
}

// simple helper to extract the firstChild nodeValue from
// a DOM Element
function getFirstChildValue( element, name ){
  return element.getElementsByTagName( name )[0].firstChild.nodeValue;
}
function getFirstChildValueNS( element, ns, name ){
  return element.getElementsByTagNameNS( ns, name )[0].firstChild.nodeValue;
}

// given an RSS DOM object walk it's
// tree and display the content
function RSSFeed( rssDoc ){
  var channel = rssDoc.getElementsByTagName( "channel" )[0];
  this.title = getFirstChildValue( channel, "title" );
  this.link = getFirstChildValue( channel, "link" );
  this.desc = getFirstChildValue( channel, "description" );
  this.lang = getFirstChildValueNS( channel, "http://purl.org/dc/elements/1.1/", "language" );
  this.creator = getFirstChildValueNS( channel, "http://purl.org/dc/elements/1.1/", "creator" );
  this.date = getFirstChildValueNS( channel, "http://purl.org/dc/elements/1.1/", "date" );
  this.show = RSSFeed_show;  this.items = new Array();

  // now walk the items
  var items = rssDoc.getElementsByTagName( "item" );
  for( var i = 0; i < items.length; ++i ){
    this.items.push( new RSSItem( items[i] ) );
  }
}

function RSSItem( rssItem ){
  this.about = rssItem.getAttributeNS( "http://www.w3.org/1999/02/22-rdf-syntax-ns#", "about" );
  this.title = getFirstChildValue( rssItem, "title" );
  //rssItem.getElementsByTagName( "title" )[0].firstChild.nodeValue;
  this.link = getFirstChildValue( rssItem, "link" );
  //rssItem.getElementsByTagName( "link" )[0].firstChild.nodeValue;
  this.desc = getFirstChildValue( rssItem, "description" );
  //rssItem.getElementsByTagName( "description" )[0].firstChild.nodeValue;
  this.show = RSSItem_show;
}

function RSSFeed_show(){
  dump( "RSSFeed\n" );
  dump( "Title:" + this.title + "\n" );
  dump( "Link: " + this.link + "\n" );
  dump( "Desc: " + this.desc + "\n" );
  dump( "Lang: " + this.lang + "\n" );
  dump( "Date: " + this.date + "\n" );

  for( var i = 0; i < this.items.length; ++i ){
   this.items[i].show();
  }
}

function RSSItem_show(){
  dump( "RSSItem\n" );
  dump( "About: " + this.about + "\n" );
  dump( "Title: " + this.title + "\n" );
  dump( "Link: " + this.link + "\n" );
  dump( "Desc: " + this.desc + "\n" );
}

Then I found this document: http://developer.apple.com/internet/webcontent/xmltransformations.html

After reading this I have started to think that it might work nicely to have a default rss style sheet with more of a browser like interface. This needs some more thought...

Anyways, I'm happy to say I finally have my own blog setup! Hopefully, I'll be able to keep this more up to date then my website.

Software DOM, Javascript, RSS, XUL