prototype channel

Making justtodolist work for chrome and safari

toby ho — Tue, 02 Sep 2008 23:01:32 -0400

Since Chrome is so great, I wanted to use it for all my browser needs. But the apps I've been working on myself have not been targeted for WebKit - the rendering engine used by chrome, and also used my Safari. This is mostly due to laziness on my part - having to handle two browsers at a time is chaos enough. But Safari compatibility is on my todo list for more than one of my projects, and chrome is a good push for this cause. And so I went in today and made just todo list. compatible with Chrome and Safari. The differences I encountered were:

This is really prototype specific - prototype adds an empty underscore parameter for all Ajax request for WebKit browsers. Because apparently, Safari errors out when you try to post with an empty body on XHR calls. And, who knows, this might already be fixed in WebKit. I happened to have code that was not handling this fact on the server side. This was no biggy.
This is an error on my part really, but I had a form with a text input inside. But also registered for the key events on the text input so that when enter is pressed I called form.submit(). The key event code is really unnecessary because an enter on the text input triggers the form submit on both FF and IE. So, although on the other 2 browsers this was no problem, in WebKit this triggers 2 posts. So... just DON'T do this.

Play Date with jQuery

toby ho — Sun, 31 Aug 2008 23:47:39 -0400

I had a new toy project and started out with my trusty sidekick: prototype.js but a bit of the way in i decide to try my hand at jQuery instead, since I've already read a lot about jQuery and really like the monad-like paradigm which allows you to write elegant "flow" code without having to worry about null values anywhere in the chain.

It was quite easy translating my existing prototype.js code to jQuery(probably just around 30 lines).

The end result was probably 20% more succient.
I love the css 3 capable selectors, it's very refreshing to be able to use attribute and partial string match selectors which normally you don't get to use for your work.
I also like the way attributes are set as chained methods(again, in the monad flavor), you do something like $('#myid').attr('value') to get the value and $('#myid').attr('value', 1) to set the value to 1. This again, allows you to chain stuff together. What's the point of this? ...I guess I just like the monad thing.
I think the jQuery syntax for behavioral javascript is prettier than prototype.js + lowpro.js

I really have nothing bad to say about jQuery. Even the UI components seem pretty on par with prototype.js, there's jqueryui, from which I used the autocomplete plugin. It's a little bit unfortunate that I had already invested about 1800 lines of javascript code on writing javascript components based on prototype.js and scriptaculous at work, otherwise had I started over I would very probably use jQuery. I will definitely go jQuery for my other projects.

Are there anything from prototype.js that I miss? Well, yes, I miss the array extensions from prototype, which lets you use ruby/smalltalk/lisp-like internal iterator style list operations. jQuery has a $.each, but it's not quite as pretty... but it gets the job done. And I haven't looked, but I am not sure there's an equivalent to prototype's Event.KEY_RETURN, Event.KEY_BACKSPACE and such in jQuery. Also, I had gotten comfortable to the OO model from prototype, and doing without it will be different, but then again I am adaptable. Plus, there's nothing at all stopping you from using jQuery and prototype.js together.

FF3 vs FF2 setting of position and width

toby ho — Mon, 23 Jun 2008 21:45:42 -0400

Wow, FF3 broke my app!

I had a line like this(sorry this code uses prototype.js, but it's not specific to it):
myDiv.setStyle({
    position: 'absolute',
    top: elmPos.top + elm.offsetHeight,
    left: elmPos.left,
width: elm.offsetWidth - 5});

This won't work anymore because starting FF3, you can't set the attributes: top, left, width, height to numeric values anymore, they have to labeled with a unit, like so:
myDiv.setStyle({
    position: 'absolute',
    top: asPx(elmPos.top + elm.offsetHeight),
    left: asPx(elmPos.left),
    width: asPx(elm.offsetWidth - 5)});

Where asPx is:
function asPx(n){
    return n + 'px';
}

Use up() instead of parentNode

toby ho — Wed, 04 Jun 2008 16:12:08 -0400

With prototype.js, you should use element.up() instead of element.parentNode. This is again because of this browser difference.

Prototype's Element dot extend

toby ho — Wed, 04 Jun 2008 12:26:37 -0400

Element.extend is an important method is the prototype framework. It adds all the helper/mixin methods to a dom element, like this:
Element.extend(myElem);
If for some reason you have to do this manually(probably in IE), this is what you need.

Constructor Chaining in Prototype

toby ho — Tue, 20 May 2008 21:32:26 -0400

Ever wonder how to do constructor chaining in prototype.js?
Here's how:

var Person = Class.create({
initialize: function(){
    console.log('hello world!');
}
});
var Pirate = Class.create(Person,{
initialize: function($super){
    console.log('before super');
    $super();
    console.log('after super');
}
});
new Person();
new Pirate();

The $super parameter is "special", and is detected by the library. It gives you a reference to the method of the same name defined in the super class(Ruby style, basically). Notice that unlike Java, you can do stuff before super's constructor is called. For more, see here.