Mr eel
Javascript
Prototype DOM Builder Gets Nice!
Prototype 1.5 now includes a DOM builder, which is awesome because I can now ditch my own little extensions to the library. The reason I’m happy about this is that I can make my own libraries which depend on Prototype, without having to also include my own DOM Builder lib. I can just depend on Prototype’s. Nice!
As nice as the builder is, I’m not too keen on the syntax. It makes sense, but it’s not all that nice. Too verbose for my tastes. Here’s an example:
new Element('a', {href:'/posts/1'})
Now that’s pretty nice, but if I’m coding some nice, degradable widgets, I might be creating a whole bunch of nodes. Soon enough that’d get annoying. But for me the real downside to this syntax is there is no way to nest nodes as you create them. Instead you have to do something like:
var anchor = new Element('a')
anchor.appendChild(document.createTextNode('weeeeeeee')
All that just to create an anchor with text? It’s nicer than the default DOM methods, but not as nice as it could be. So I’ve created my own extension to the Builder. Firstly it gives us a shortcut; $E(). Secondly it lets us nest elements as we create them and it automatically handles creation of text nodes. Here it is in it’s entirety
var $E = function(tag, content, options) {
if (tag == 'text') return document.createTextNode(content);
if (!options) options = {};
var element = new Element(tag, options);
if (content) {
if (content.constructor == Array) {
for (var i=0; i < content.length; i++) {
if (typeof content[i] == 'string') content[i] = $E('text', content[i]);
element.appendChild(content[i]);
};
}
else {
if (typeof content == 'string') content = $E('text', content);
element.appendChild(content);
}
}
return element;
};
Some example usage:
$E('a', 'weeeeeee', {className:'hotHotLink'})
$E('ul', $E('li', 'this is the li content'))
Internet Explorer - Something to look out for when coding JS
Internet Explorer doesn’t just have a shit box model, it also has a terrible javascript engine. Inevitably my DOM-compliant javascript code — which works beautifully in Firefox — will explode when I try to run it in Internet Exploder.
The debugging text is useless. The actual error text is vague i.e. “not implemented”. What’s not implemented? It never tells me. That wouldn’t be quite as bad, but it mis-reports the line the error is occurring on, so even an educated guess is difficult.
Trial and error(s) is the only way to pin the bastard down.
Anyway, all this complaining was prompted by one particular problem I had to debug today. IE has a global variable called parent. I was using this variable to store a reference to a DOM node’s parent (but of course!). I could care less what IE was using the variable for, I just wanted it! The problem was that I was trying to assign a value to the variable without declaring it. IE didn’t like that so much. So I declared the variable using var, squashing the original reference and the problem went away.
Grrrrrrrrr.
A Shop - Web Application Stylee
It’s always nice to see people getting a bit more adventurous with javascript. For example here is a nice website offering Mac Dashboard widgets. Some really slick animation, dynamic loading etc. It’s pretty sweet.
Now, I think it has the same problems as a website created entirely using flash — you can’t bookmark the pages — but I think it shows that javascript based web apps with sophisticated behaviour are entirely possible.
Oh yeh, and the Flip Clock widget they offer is really sweet too.
Model View Control in Javascript
Recently I’ve been knocking about some ideas for developing a Web App framework using a MVC architecture. In the future I will need to create some quite complex interfaces for web applications. I’ve decided to take a more planned approach this time — as opposed to my usual scattershot approach.
The great thing about the internet is this; someone has probably already done whatever it is you were thinking about. In this case Trim Junction, a web app framework using MVC and inspired by Ruby on Rails.
Rather than coding something myself, it may make more sense to contribute to an existing open project. I’ll have to investigate it a little more.