Source: remix of images created by Everaldo Coelho and Wikimedia Commons user S.Möller.

Blogging has been a powerful tool for me to publicize code that I have written.  Not only can I announce code that I want to release, I am always complimented by the fact that others like to share what they read here as well. Over the years, however, I have found bits of code others have written that have found irreplaceable in my web developer toolkit.  Some of them are popular, but others are either obscure or not talked about at all.  In order to give back to those who have unknowingly helped me do my job in the last decade, I am publishing the first in what hope is a series of articles about 3rd party JavaScript libraries.  If anyone else would like to add to this list, please feel free to do so in the comment area below – I’d love to hear what others find as useful as what I have listed here.

Object Oriented Timeouts

I start off with a script that has been around for a while but to my knowledge is hardly ever talked about.   It concerns Timeouts – which are quite important in this day-and-age of the “nifty-Web-2.0-animated-fade-in-and-out-effect”. When I starting coding JavaScript back in the mid-1990′s, setTimeout() and setInterval() did what I needed them to do – pause the application logic for a specified amount of time. However, when I starting to use the object-oriented features of JavaScript, I found a few problems:

• setTimeout()and setInterval() both lose track of scope when calling a method of an object
• setTimeout()and setInterval() can only pass strings and numbers to methods, not an arbitrary object.
• the function call passed to setTimeout()and setInterval()is passed as a string.   Parameters of the function call must be inserted by using ugly string concatenation:

setTimeout('fadeInLayer(' + (n+50).toString() +')');

However, back in 2003, a user named “algorithm” on Coding Forums came up with a great solution for Object Oriented Timeouts. Timeouts can now be done with objects and with a more elegant syntax:

function AjaxDialogue() {
   var me = this;

   // declaration of Timer object.
   me.timer = new Timer(me);

   // a timeout function using the Timer object:
   me.fadeInLayer = function (n, layerOpened, onFadeInEvent){

      ....

      /*
       * This call will set the opacity level of the node layeredOpened to n
       * percent
       */
      CSSHelpers.setOpacity(layerOpened, n);

      if (n < 100) {

         /*
          * setting a timeout of 10 milliseconds on the *public* method fadeInLayer() with the
          * parameters n+50, layerOpened, and onFadeInEvent.  Note only the first parameter
          * is not an object.
          */
         me.timer.setTimeout('fadeInLayer', 10, n+50, layerOpened, onFadeInEvent);

      }
   }
}

The question is: who is this “algorithm” person? This is brilliant code and should be credited correctly. It should also have a better home than just a forum posting.

Calendar Widget

HTML5 will have date input tags (i.e. <input type="date" />), complete will pop-up calendars, but until it is implemented by all browser vendors, what is a developer to do when they want users to input dates in a user friendly way? The best calendar widget I have found is dynarch.com’s Ex-“Coolest” DHTML Calendar. Although they have a cooler version, I like the former one more because it was released under the GNU Lesser Public License, so it is free as in beer as well as in freedom.

Querystring Parsing and Ajax Form Data Submission

I always found it odd that there is no built-in method in JavaScriptto grab form data from the query string from a web page’s URL. Adam Vandenberg’s Querystring Object filled in this gap with a simple script that gets this job done. Suppose your web page had the following URL:

http://me.com/mypage.html?page=3&itemsPerPage=10&query=Biker+Babes

To tell JavaScript to retrieve the value inside the CGI variable query, use the following code:

var qs = new Querystring();
var message = qs.get('query');

But how about if you have data in a form and you want to submit it using Ajax instead of the traditional post-to-the-server-and-retrieve-from-the-server way? Matthew Eernisse’s formData2QueryString() will construct a query string from a form so you can use with the XMLHttpRequest Object.

var queryString = formData2QueryString(form);

req=new new XMLHttpRequest();

req.onreadystatechange(myFunc);

req.open("GET", "/path/to/ajaxCall?" + queryString, true);

Logging

In any language, logging and debugging are necessary when it comes to discovering what is wrong with your code. While debuggers like Firebug are great for stepping into code line by line and understanding why an algorithm isn’t working right, it is sometimes more desirable to dump variables into a log, especially when trying to debug race conditions.  Logging is also useful when you are too lazy to open a debugger but you don’t want your code bogged down by window.alert()‘s

My favourite JavaScript logger is Andre Lewis’ JSLog . It doesn’t rely on a specific JavaScript framework, and it also stays out of the way until I need it — it starts off as a small yellow box in the top left corner of the application’s page, and only shows up when I click on it.

Ajax History and Bookmarking

After Google Maps came on the scene, a few usability experts pointed out the drawbacks of a lot of “Ajax” Applications:

• Ajax breaks bookmarking: when users click on a link that results in an Ajax call that changes the content on the screen, users may wish to bookmark the results, and will be disappointed to realize that they didn’t really bookmark the result of the Ajax call.
• Ajax breaks browser history: when users click on a link that results in an Ajax call that changes the content on the screen, they may intuitively click the back button in order return to the page’s state, ande will be frustrated when this doesn’t happen.

Really Simple History (RSH): Ajax history and bookmarking library, developed by Brad Neuberg and Brian Dillard, fixes these issues by storing data inside an JavaScript “cache” so that application state can be bookmarked and so that the back button can be used to return your application to an earlier state.  I have used this library on a number of Ajax heavy applications and it works extremely well.

Fixing IE

Although Dean Edwards’ /ie7/ is not perfect, it does fix a lot of CSS issues with elderly versions of IE.  I use it as one of many utilities in my toolbox when working with Internet Explorer.  It is an awesome piece of work and since Edwards is well known in the JavaScript community, the only thing I can really add that hasn’t been said before is “Rispek“.

sprintf()

I started off as a C programmer, and when I first started coding in JavaScript, I was happy with it’s “C-like” syntax.  The thing I missed most from the C-world was (and is) JavaScript’s lack of a sprintf() function, which makes the task of formatting strings quite easy.  sprintf() is more powerful and produces more human-legable code than using the + JavaScript’s operator.

K&L Productions has produced a very good version JavaScript implementation of sprintf that I use regularly. There are others, but this one is the most complete version I have found and works well enough that I haven’t found a reason to change it. Perhaps it would be worthy of a future blog post to compare implementations to see which performs the best.