Category: domscripting

Linked off the FAQ for Firebug (another nice Firefox extension for debugging), I ran across JSLog. In short, it's a JavaScript library for unobtrusively adding logging to a page. The extension’s web page puts it this way:

Every language needs a System.out.println() or a Console.writeLine() — a quick and easy way to output messages to you, the developer, during development and testing. Historically, Javascript programmers have used alert() for this purpose. […] Safe to say that if you've done AJAX programming, you are sick of alert(). JSLog solves these problems! […]

Considering that I’m working on a webapp with heavy DOM Scripting, I think this’ll be just what I need:

• It’s absolutely positioned, so it doesn’t affect the layout of the page
• It can be enabled or disabled by setting a single variable, so debug statements can remain in scripts and appear only when needed
• It supports several alert-levels (debug, warning, info, and error) to differentiate messages of varying severity

What’s also nice is that it’s pretty small — in minimized form, it’s just a box with a number in it (counting the number of messages in the console). I suppose it could be conceivably left enabled on a development server without getting in the way of other developers. I can’t wait to put this to use.

If you do any DOM Scripting, there's a good chance you’ve heard of the Behaviour library. Or, in case not, the basic idea is that the library allows developers to apply functions to elements or their event handlers through CSS selectors.

Behaviour is really cool and has made my life easier. All the same, a successor may be in the wings — event:Selectors is very similar but it adds pseudo-classes so that event handlers can be specified right in the selector. For example, you could have something like this:

'#icons a:mouseover': function(element) {
var app = element.id;
new Effect.BlindDown(app + '-content', {queue: 'end', duration: 0.2});
},

In addition to a less verbose syntax than Behaviour, event:Selectors also allows for comma-delimited selectors for a given rule (just like real CSS). Another difference is that event:Selectors makes use of the Prototype library. So, if a project you’re working on is already making use of Prototype, then event:Selectors ends up being a fairly lightweight addition; on the other hand, if you just need some one-off event handling stuff on a project which already isn't using Prototype, then Behaviour may be the leaner choice. Speaking for myself, though, I can’t wait to give it a try :).