Standalone ChatZilla on OS X 10.8

I'm a big fan of ChatZilla, I've used it for years, and for a while I was a fairly active contributor.

These days I spend most of my time on a Mac, where the ChatZilla experience isn't as nice as it could be, due to the cmd+tab behaviour when running as an addon. When ChatZilla is a part of the brower, it's a pain to switch between it and other apps you may be using.

The following instructions are very rough, more of a brain-dump while this is fresh in my mind. I'll try and tidy them up at some point.

The solution, is to run ChatZilla as its own application, there are some instructions for doing this at http://chatzilla.rdmsoft.com/xulrunner/, but I couldn't get these to work for me. I appeared to be running into this bug https://bugzilla.mozilla.org/show_bug.cgi?id=699966

Undeterred, I figured there must be another option - Firefox since version 3.0 has provided an "-app" option, which can be pointed to an xulapp application.ini, and will launch it standalone. Happily, this works! But we're left with an application called "Firefox" and with the firefox icon.

The solution now is found on this superuser answer: http://superuser.com/questions/271678/how-do-i-pass-command-line-arguments-to... specifically, option 2.

I made a copy of Firefox.app, renamed it ChatZilla.app, edited the Info.plist, unpacked the .xulapp into the application's /Resources folder and created a little bash script that would execute ChatZilla.app/Contents/MacOS/firefox-bin with the appropriate -app switch. All references to firefox in the Info.plist need to be changed to ChatZilla, to ensure the OS doesn't get confused about which is the actual default browser.

The final step was then to use http://iconverticons.com/online/ to take the ChatZilla .ico and turn it into an icns file for my new application.

I think I now actually understand JavaScript objects

Over the last week or so, I've been writing a lot of NodeJS-based JavaScript, and in doing so I realised I didn't really have a picture of how the object model actually fits together. So I did some reading, and now I'm pretty sure I get it.

The articles I read are linked at the bottom of the post, but often code is clearer to read than paragraphs of explanation. I've thrown together some implementations of the key players in the javascript object model that mirror what the actual engine is doing under the hood.

The following examples should explain the prototype chain, how it's assembled and how it's interacted with - I've added some console output to the loops so we can see what's happening as they're called.

The code below assumes that its running under an ECMAScript 5 environment, so thats the latest versions of Safari, Chrome and Firefox - as well as NodeJS. It takes advantage of Object.create and Object.getPrototypeOf, these are the standardised versions of messing around with the __proto__ property.

And to see it in action:

Which produces:

> node demo.js 
john instance_of Employee
Trying to match Employee.prototype
Comparing to Retired.prototype
Comparing to Employee.prototype
true

john instance_of Array
Trying to match Array.prototype
Comparing to Retired.prototype
Comparing to Employee.prototype
Comparing to Person.prototype
Comparing to Object.prototype
false

new_instance(Person, 'john') instanceof Person
true

new_instance(Employee, 'boss', 'john') instanceof Employee
true

get_attribute(john, 'role')
Looking on object directly
Boss

get_attribute(john, 'greeting')
Looking on object directly
Looking on Retired.prototype
Looking on Employee.prototype
Welcome to work

call_method(john, 'greet')
Looking on object directly
Looking on Retired.prototype
Looking on Employee.prototype
Looking on Person.prototype
Hello John

If you'd like to have a play with these functions without firing up NodeJS, here's the obligatory JSFiddle: http://jsfiddle.net/88je8/1/

See also:

Taking advantage of JavaScript function hoisting

Just a quick one that I wanted to write down before I forget.

Function statements (like var statements) get hoisted up to the top of their declaring scope before evaluation. This means that the location of a function (or constructor function) definition within a file is entirely down to aesthetics - as long as the scope is correct.

This can be used to make defining normal JavaScript classes look a little bit more classical, without messing around with vastly different syntax.

"Static" methods in Javascript.

I've been trying to find a way to have "static" methods in Javascript, NodeJS to be exact.

It turns out that using the util.inherits function in NodeJS, this "just works".

The "definition" of static I'm using here is a bit lax, but it's a function that does the same thing when called from the prototype or an instance, and has access to the properties attached to the class it was called against.

To try it out in action without dropping this into a browser or firing up NodeJS: http://jsfiddle.net/Af6xD/4