Jim Higson's blog

XHTML, Mozilla Firefox and ContentEditable

2009-09-25T09:40:00.000-07:00

Can't quite get over that I'm using wifi on a bus. Job search is going well, have two companies I'm fairly sure are going to make offers and a few more leads to chase up just in case. More later if I get the jobs.

Switching from iframe/designMode to div/contentEditable and suddenly nothing was editable. Can't find this mentioned anywhere online so will blog it here: In Moz, contentEditable does nothing if the document is XHTML. In Fiinrefox 3+ and HTML this makes the element editable as per my favourite IE proprietary feature turned spec in HTML5. This isn't so surprising (contentEditable is part of HTML5, not the rather more strictly defined XHTML) but took me a long time to work out. Annoying because now I have to change a thousand .tagNames to .tagName.toLowerCase(). Double annoying because I can't use Array.pluck('tagName') to get a bunch of tagNames at once. Oh well.

So why switch? Well, having client-side applications span two documents was creating more problems than it solved. Prototype tends to make assumptions that there is only one document and sometimes gets upset when element.ownerDocument != document. Add to that, dragging and dropping breaks when the cursor wanders into another document and the overhead of loading some of the javascript twice and for a while now I've been planning on maaking this change. Hence branches/designMode-to-contentEditable/ in SVN

Chrome and DOM mutation events

2009-09-21T10:27:00.000-07:00

I just found out the hard way: Chrome (or at least, the Linux dev builds but very likely the proper releases too) only fire DOM mutation events if the element which mutates is in the current document. Very likely Safari suffers from the same bug but until I can get it the Windows version working under WINE I can only test that theory at work.

This really quite sucks. Say you generate some XML, convert to HTML and put the HTML on the page, then start changing the XML and want to keep the HTML in sync. Well, you can't, unless you put the XML in the page too and hide it with style="display:none" or whatever. Luckily, the browsers don't seem to mind when you add weirdly named elements to the page.

The above example is essentially what I'm doing. The XML is my wikixml representation and the HTML is the same, as syntax highlighted HTML.

I'll try to work out if this is Chrome or webkit and send a bug report in as appropriate.

Mixin factory: Really handy pattern for Classical OOP in Javascript

2009-09-20T10:59:00.000-07:00

Prototype Classes have a sort-of multiple inheritance feature that lets you throw in Ruby-esque mixins when a Class is defined. There's a pretty good tutorial on the Prototype site.

I got a bit fed up my mixins defining not-really-hidden-but-they-start-with-an-underscore-and-have-a-slightly-obscure-name-so-lets-pretend-they-are-actually-private variables. Whenever I wanted to define state on the instance that could be shared between the mixed in functions this was the most obvious way to do this. These aren't proper private variables, they're just normal variables pretending to be

The basic form for a mixin factory is:

    var HOP_RUN_MIXIN_FACTORY = {
        make:function( likesToHop ) {

        //  vars here and arguments passed to make are per-Class that uses the mixin
            var perClassVaraible = 'one of these per class using the mixin';


        /*  return the mixin object */
            return {
                hop:function(){   
                    if( likesToHop )
                        alert( 'yay!' );
                    else
                        alert( 'meh' );
                    // ...etc ...
                }
            ,   run:function(){
                    // ...etc ...
                }
            }

        }
    };

Then, in the classes:

var Rabbit = Class.create( HOP_RUN_MIXIN_FACTORY.make( true ),
{
    initialize:function(){
    //  ...etc...
    }
,   makeMoreRabbits:function(){
    //  ...etc...
    }
}
);

var Owl = Class.create( HOP_RUN_MIXIN_FACTORY.make( false ),
{
    initialize:function(){
    //  ...etc...
    }
,   lookArround:function(){
    //  ...etc...
    }
}
);

The point is that this can be used to create slightly different versions of mixins and provides a place to keep per-class variables inside the mixin (eg, in Java, the closest analog is private static fields).

Great code, doesn't fix it!

It'll probably be a long wait until the uber awsomeness that is CSS transitions is well supported and until then I'm using the rather lovely, if somewhat breaky, Scriptaculous (aka Scripty) to fade elements in and out. CSS would be so much nicer for this, keeping the presentation (eg, that something is fading rather than just appearing) out of the Javascript. Oh well, one day.

When you want to fade something in and out, Scripty puts a surprising amount of work put on the programmer. Two conflicting effects acting at the same time on the same element are bad. Weird, flickery things happen. So before creating the Effect.appear you have to check the object isn't already appearing or fading: If appearing do nothing. If fading, cancel fade, start appear. I found I had the code to do this in several places: obvious candidate for moving into a mixin.

So, I started to implement as a Mixin Factory, storing the appear and fade effects inside the make method, ie like the var perClassVaraible in the HOP_RUN_MIXIN_FACTORY. Humph, closures are such a powerful concept but sometimes difficult to see - since the factory method is called once per class rather than once per instantiation, this was only allowing one instance of the class to do the fade in and out thing at a time. So, back to polluting my objects with this._fade_effect and this._appear_effect.

Variation - per-instance state in the mixin

Genuine per-instance mixin variables are possible but you have to ignore Class's mixin feature and mixin manually from the initialize method:

    var Rabbit = Class.create({
            initialize:function() {
                Object.extend( this, HOP_RUN_MIXIN_FACTORY.make() );
            }
        }
    );

One interesting side-effect is that the same mixin can be used to create state per-instance or per-class depending on how the mixin is applied. Maybe useful.

Fade Mixin Factory

Here is the real code I'm using now to fade in and out, in the form of a mixin factory applied from the initialize function. As usual, this is also available from Wikizzle's subversion, which is probably a more recent and/or better version than here:

var FADE_MIXIN_FACTORY = 
{
    make:function fade_mixin_factory__make( appear_options, fade_options, element ){

        var appear_effect, fade_effect;

        appear_options = appear_options || {};
        fade_options = fade_options || {};

        appear_options.afterFinish = (appear_options.afterFinish || function(){})
            .wrap( function( proceed ){
                proceed()
                fade_effect = null;
            });

        fade_options.afterFinish = (fade_options.afterFinish || function(){})
            .wrap( function( proceed ){
                proceed();
                appear_effect = null;
            });

    /*    return the mixin we made: */
        return {

            appear: function fade_mixin__appear() {

                if( appear_effect ) {    
                    return;
                }

                if( fade_effect ) {
                    fade_effect.cancel();
                    fade_effect = null;
                }

                appear_options.owner = this;
                appear_effect = new Effect.Appear( element || this.toElement(), 
                                                   appear_options );
            }

        ,    fade: function() {

                if( fade_effect ) {
                    return;
                }

                if( appear_effect ) {
                    appear_effect.cancel();
                    appear_effect = null;
                }

                fade_options.owner = this;
                fade_effect = new Effect.Fade(  element || this.toElement(), 
                                                fade_options );
            }
        };
    }
}

Did I read that correctly?

2009-06-10T09:08:00.000-07:00

'crush' is a valid rel value for HTML5?

As in, you link to the pages of people you (or whoever you're making the page for) have crushes on

Bwah?

MediaWiki Syntax highlighting

2009-06-08T12:32:00.000-07:00

I got the chance to hack a bit over the weekend so Wikizzle's trunk now has some quite pretty syntax highlighting. Iframes in designmode make DOM events look consistent. It is by far the quirkiest of all browser features I've ever coded with. Really, really, evily quirky. "A brutal odyssey to the dark side of the DOM tree" barely sums it up. At this stage the non-highlighted code works much better. In fact, the highlighted version just shows once and never updates. Gotta start somewhere.

Canon MP210 on 64bit Ubuntu

2009-05-05T11:05:00.000-07:00

This wasn't so tough but a little more difficult than I'd have liked. (I'd have liked: plug in, works)

Strangely, the only place carrying the Linux drivers is Canon Australia's driver download page. Weird, I know. But easy to find thanks to Google.

Get these four files:

cnijfilter-common_2.80-1_i386.deb
cnijfilter-mp210series_2.80-1_i386.deb
scangearmp-common_1.10-1_i386.deb
scangearmp-mp210series_1.10-1_i386.deb

The files are all for 32bit, but they seem to work ok if you force apt not to notice that:

sudo dpkg -i --force-architecture *.deb

And... that's it. Set printer up as usual and scan through The Gimp.

Is is strange that Canon but all the effort into making Linux drivers and then distribute them so badly:

You have to go into the command line. To install a printer. On a distro targeted at the mainstream. Not good.
Only Canon Australia carries the files
They are packaged as being 32bit only when really 64bit is fine.

This is all really odd. Stuff like this is expensive to write but (should be) cheap to distribute. I don't get it.

Oxford Geek Night microslot notes

2009-03-23T14:05:00.000-07:00

I just uploaded my Geek Night Notes. Yep, that's right - the notes are an XHTML/Javascript web app.

The notes are done in S5 from MeyerWeb with SyntaxHighlighter shoehorned in, and then a few little hackings on SyntaxHighlighter so it marks up my Smarty preprocessor stuff in big red text (because that's what the talk is about!)

There aren't loads but I only get five minutes so I think this is enough.

Wiki XML parser little milestone

2009-03-15T09:17:00.000-07:00

Continuing the rewrite of my client-side Javascript wikitext parser, this:

[[image:grep.jpg|left|200px|a [[wp:en:grep|grep plantation]]]]

Now gives this XML:

<link avaliable="unknown" is-image="yes">
    <token direction="open" type="link">[[</token>
    <linktarget>
        <namespace type="media">
            <key>image</key>
            <token direction="open+close" type="namespace">:</token>
            <article-name>grep.jpg</article-name>
        </namespace>
    </linktarget>
    <token direction="open+close">|</token>
    <params>
        <param name="horiz-align">left</param>
        <token direction="open+close">|</token>
        <param name="size">
            <quantity>200</quantity>
            <units>px</units>
        </param>
        <token direction="open+close">|</token>
        <param name="text">
            a
            <link avaliable="unknown">
                <token direction="open" type="link">[[</token>
                <linktarget>
                    <namespace type="normal">
                        <key>wp</key>
                        <token direction="open+close" type="namespace">:</token>
                        <namespace type="normal">
                            <key>en</key>
                            <token direction="open+close" type="namespace">:</token>
                            <article-name>grep</article-name>
                        </namespace>
                    </namespace>
                </linktarget>
                <token direction="open+close">|</token>
                <params>
                    <param name="text">grep plantation</param>
                </params>
                <token direction="close" type="link">]]</token>
            </link>
        </param>
    </params>
    <token direction="close" type="link">]]</token>
</link>

Read that and look at the text in the XML - not the attributes or tags, the other bits (if SyntaxHighlighter is working correctly, the black bits) "[[", "image", ":", "grep.jpg" etc... everything from the wikitext is there, in order, with no new text thrown in. Because all text is preserved and this is just normal browser DOM XML, calling textContent on it gives us back this:

[[image:grep.jpg|left|200px|a [[wp:en:grep|grep plantation]]]]

That is, exactly what we started with. Completely reliable out-and-back conversion. This is going to let me do some amazingly cool things with wiki editing. If the XML above looks verbose, remember we have a link inside a link (in mediawiki wikitext, images are links), one of which has two namespaces and the other with lots of parameters. It has to be big to capture the semantics.

Prototype can be brittle

2009-03-05T09:37:00.000-08:00

Wikizzle stopped working in Firefox 3.1 beta 3 because Prototype started provoking errors. This got me looking into Prototype. I just put up an example page highlighting how easy it is to break Prototype if you add to Object.prototype. The code:

<html xmlns="http://www.w3.org/1999/xhtml">
    <script>
        Object.prototype.foo = function foo(){ return "@@" };
    </script> 
          <script src="prototype-1.6.0.3.js" type="text/javascript"></script> 
           This page is here as a test
           <script type="text/javascript">
                   $$('body').first().insert( { top:new Element('div') } );
           </script>
</html>

The bit that breaks is this:

writeAttribute: function(element, name, value) {
  element = $(element);
  var attributes = { }, t = Element._attributeTranslations.write;

  if (typeof name == 'object') attributes = name;
  else attributes[name] = Object.isUndefined(value) ? true : value;

  for (var attr in attributes) {
    name = t.names[attr] || attr;
    value = attributes[attr];
    if (t.values[attr]) name = t.values[attr](element, value);
    if (value === false || value === null)
      element.removeAttribute(name);
    else if (value === true)
      element.setAttribute(name, name);
    else element.setAttribute(name, value);
  }
  return element;
},

Simplified:

 for (var attr in attributes) {
     //blah blah blah

    element.setAttribute(attr, attributes[attr]);
 }

The problem is that for in in Javascript enumerates over all the properties, even if they come from the prototype. So extending the Object prototype...

  Object.prototype.foo = function foo(){ return "@@" };

...causes a call to:

  element.setAttribute('foo', function foo(){ return "@@" } );

And DOM attributes can't contain '@'. Luckily, this is probably easy to fix with hasOwnProperty but I'm surprised nobody noticed this before.

Oxford Starbucks are rubbish, don't go there

2009-03-04T04:48:00.000-08:00

"Hmmmm..." that's strange. Which network?

Jim goes back up to counter

"Hey, you have wifi, don't you?"

Starbucks person: "Yes, five pounds per hour"

Me: I bought coffee, can't I have it for free?

Starbucks person: "No"

"Wow, you really fail!"

When I buy coffee I'm not paying for coffee. I'm paying to sit and drink coffee in a nice environment. If you're a cafe, a nice environment requires free wifi.

If you must charge for internet, £1 per hour is ok if I'm using your computer. 50p per hour maybe if I'm using my own laptop. Charging £5 per hour for something everyone knows you can get for £10 per month just makes your company look stupid.

I'm not saying boycott Starbucks. Just don't go in the Oxford one if you need the net

I'm microslotting at OGN

2009-02-24T02:07:00.001-08:00

I started the Software Engineering Programme yesterday. Not getting on with mac keyboards but otherwise having a nice time.

Sometime last week I got an email about the next Oxford Geek Night asking for microslot speakers. I simultaneously love and hate public speaking. I put myself in front of crowds enough to convincingly fake being comfortable but not enough to actually be comfortable. My title is "Big Javascript: preprocessing". Hmmm... five minutes for a big subject.

Order, Cat, Min Gzip

Hacking in isolation it is difficult to see what stuff is fresh and what is routine. Do I mention minning and gzipping or is that old hat now? The Oxford University homepage delivers 120k of big jQuery instead of the highly compressed "production" 19k. Wikizzle raw is 70 javascript files and 650k but compressed just 90k; this 87% reduction isn't atypical. Even running on localhost the difference is huge - clear cache between clicks and compare load times:

How does this work? In bash I:

find all javascript files, pipe into...
a hacky PHP script. Reads the file list and outputs the list in a runnable order. Pipes to...
xargs; passes the filenames to cat. Cat reads them all into one long stream, that stream goes to...
The preprocessor, pipes into...
The minner, pipes into...
gzip. Redirect to our deployable file
The file is saved with the md5 in the filename and the server and (since it never changes) is safe to cache forever. Because of the md5, if the code changes the filename changes so different code will never (well, extremely unlikely anyway) be served from the same uri.

Wow. Sometimes you don't realise how involved something is until you come to describe it to another person. There is a cool library now to do this called Sprockets by the guys who made Prototype but Sprokets wasn't there when I started Wikizzle and my NiH syndrome is strong enough that I'm going to stick with what I have for now.

Preprocessing

I think this is the interesting part. I'll probably skip over the above and talk about this bit most. I did a neat hack to put C-style preprocessing into Javascript.

As we've seen above, a stream of all the javascript files joined flows through the preprocessor but preprocessing also has to happen if we're running without compression. This is pretty easy to do because Apache implements handlers which can be used this to filter files through arbitrary scripts.

I have to get back to class now. Implementation details to follow.

Wikitext XML format

2009-02-21T04:51:00.000-08:00

Today I've been tying up some hacking to revise Wikizzle's XML wikitext representation. This wikitext: [[talk:woot]] now parses to this:

<article>
 <paragraph lineno="0" charno="0">
  <link avaliable="unknown">
   <parse:token direction="open" type="link">[[</parse:token>
   <linktarget>
    <namespace type="normal">
     <key>talk</key>
     <parse:token direction="open+close" type="namespace">:</parse:token>
     <article-name>woot</article-name>
    </namespace>
   </linktarget>
   <parse:token direction="close" type="link">]]</parse:token>
   <linkoptions/>
  </link>
 </paragraph>
</article>

New things:

The parse namepace hints at where the syntax tree came from. When I convert the wikixml to xhtml parse elements get ignored but lots of interesting applications open up when you know where your tokens are, the first being a syntax highlighting editor. Later, I want to offer a 'pseudo-preview' which overlays some of the wikitext tokens as a learning aid.
If you traverse and output all the text nodes in order (in xpath, as easy as '//text()') you get (pretty much) the original wikitext. I can't say why this is cool or useful but I'm pretty sure it is. Remember, Beauty is our Business.

Just imagine if you could cleanly go from wikitext to XML and back again - you could programatically alter the parse tree for the user (eg, adding rows to tables) and the wikitext would be rewritten to represent this - fancy editor functions without all that ugly regexp half-parser substitutions.

Sketch dump

2009-02-21T03:26:00.001-08:00

A little sketch put itself amongst my notes during a meeting this week. Meet regular drawees of mine Jum and Druma.

On related news, the new scanner works great. Everyone should buy a Canon MP210, I paid £40 at dabs. As if that wasn't already stupidly cheap, when I bought mine Canon would send you a £15 cheque for filling in a form and posting it back to them but I don't think they do that anymore. Linux drivers were slightly hard to find but good.

"Call as much as you like, I'll only answer when I want to."

2009-02-11T01:55:00.000-08:00

Ok, this idea works now. Blog it. I don't have unit tests ye but unit testing temporal stuff quickly gets messy and this isn't very complicated so I'll just trust it works and wait until stuff starts to break :-)

Parameters

name

The maximum rate this function can be called at.

For example, if updateInterface() updates your user interface, $('someelement').onchange = updateInterface.maxrate( 200 ); Will update the interface on changes, but not more than once every 200ms

defer

If false, unset, calling before we're ready to call again will do nothing. If truey, the calling will queue a call to take place the earliest possible while observing the maximum rate. Set this to true if you want to make sure the interface (or whatever) reacts to the event

...and the code!

Function.prototype.maxrate =
   function( rate, defer )
   {
       var lastcalled = 0;
       var f = this;
       var scheduled = -1;
  
       return  function()
               {
                   var now = new Date().getTime();
                   var nextchance = lastcalled + rate;

                   if( now > nextchance )
                   {   
                       lastcalled = now;
                       return f.apply( this, arguments );
                   }

                   if( defer && scheduled == -1 )
                   {
                       var obj = this;
                       var args = arguments;       
                       scheduled = window.setTimeout(
                           function()
                           {
                               var now = new Date().getTime();

                               lastcalled = now;
                               f.apply( obj, args );
                               scheduled = -1;
                           }, nextchance - now );
                   }
               };
   };

A function that only lets you call it at a certain rate

2009-02-06T05:40:00.000-08:00

Ok, so I have way to turn any function into a function that only lets you call it once. Now I want one that only lets itself be called up to a maximum rate. Why is this helpful? Well, let's say you want to listen to a text area and do some fairly expensive thing when it changes. You want to do it quite often but you don't want to do it every single time a key is pressed. You could do this:

function do_something(){
// do something here
}
$('some-text-area').onchange = do_something.maxrate( 2 );

Or, if you like:

$('some-text-area').onchange = 
    function() {
        // do something here
    }.maxrate( 2 );

Of course, you shouldn't really be using onchange directly. Since I like Prototype I'd probably use Element.observe:

$('some-text-area').observe(  
    function() {
        // do something here
    }.maxrate( 2 ));

So now your text area will do what you want but not more than twice per second. This is just an idea for now, I'll see if I can get the code stable.

A better onttime.js

2009-02-03T06:33:00.001-08:00

I updated the old onetime.js This doesn't keep the reference to the old function longer than is needed (possibly allowing it to be garbage collected) and removes the need for a conditional:

Function.prototype.onetime =
    function()
    {
        var f = this;
 
        return  function()
                {
                    var rtn = f.apply( this, arguments );
                    f = function(){}; //replace f with empty function
                    return rtn;
                };
    };

One-time functions in Javascript

2009-02-01T04:57:00.000-08:00

This morning I had an idea for one-time functions, a function that only works once. With a little libarary code any function can be made into a one-time function like this:

function func()
{
    alert( "I won't say this again" );
}
func = func.onetime();

Or, shorthand of the above:

var func =
    function()
    {
        alert( "I won't say this again" );
    }.onetime();

Adding a method to Function that returns an altered version of the function was inspired by Prototype's bind, delay etc. The first time a one-time function is called it does whatever it would normally do. The second time, and every other time, it does nothing. This is useful for all kinds of things. For example, if you have a search box like this:

<input id="searchinput" type="text" name="q" id="searchinput" value="Enter term here" />

And javascript like this:

$('searchinput').onfocus = function(){ $('searchinput').value = '' };

Now you have the annoying (mis)behviour that if you click into the search box, type something, go away, then click in again, what you typred before is blanked. There are los of ways you could fix it. Like this:

$('searchinput').onfocus =
    function( e )
    {
        if( this.value = "Enter term here" )
            this.value = '';
    };

Or like this:

$('searchinput').onfocus =
    function( e )
    {
        $('searchinput').onfocus = null; //don't do this again
        $('searchinput').value = '';
    };

But I think this is the neatest:

$('searchinput').onfocus = function(){ $('searchinput').value = '' }.onetime();

Yeah, I know onfocus isn't the modern way but it is the easist to write for these examples.

Implementation

Here's the onetime implementation, or you can get it from Wikizzle's SVN at trunk/javascript/util/prototype/onetime.js

Function.prototype.onetime =
    function()
    {
        var called = false;
        var orignal_function = this;

        return  function()
                {
                    if( !called )
                    {
                        called = true;
                        return orignal_function.apply( this, arguments );
                    }
                };
    };

And here are the unit tests, using the Scriptaculous unit test framework:


new Test.Unit.Runner(
{
    test_on_function: function() { with(this) {

    //  a function to just return its own arguments:
        var testfunc =
                function f( arg1 )
                {   return arg1;
                }.onetime();

        assertEqual(    5, testfunc( 5 ) );
 //  second call should be undefined:
        assertEqual(    undefined, testfunc( 5 ) );
    }}

,   test_as_method: function() { with(this) {

        var test_obj =
            {
                give_me_five:   function()
                                {   return 5;
                                }.onetime()
            };

        assertEqual(    5, test_obj.give_me_five() );
        assertNotEqual( 5, test_obj.give_me_five() );
    }}

}, 'testlog' );

...and They pass! :-)

Linux printing still (sometimes) sucks

2009-01-31T05:39:00.000-08:00

It's a while since ESR wrote The Luxury of Ignorance: an Open Source Horror story. Today I wanted to print a PDF of exercise classes at my local sports centre. Here's how it looked on my desktop: I'm using the normally excellent KPDF to view the file: And here's how it looked on paper: Ah. Maybe I need to set it to landscape. Oh. That was landscape. Maybe I should try portrait? Yeah, now I made two bits of scrap paper. Sometimes, Linux printing sucks. I don't have time to search for the options to fix this, I'll just wait until Monday and print from work.

Prototype Singleton classes

2009-01-23T02:02:00.000-08:00

Usually a project starts small so you keep it simple and just put everything in global functions. Then it gets big and you have to reorganise a bit because there's to much in scope to keep it all in your mind at once. That's what I'm doing now for Wikizzle now - using object orientation to encapsulate all the workings behind a nice structure. I'd never want more than one instance of a lot of these classes so let's figure out a nice Javascript Singleton.

Some background

A Singleton is a just class that you just make one of. That's it. In a browser the document object is an example of a singleton. After a bit of research I decided you could make a pretty good singleton using this pattern from DhtmlKitchen and (if you want) add private methods to it using Douglas Crockford's private members pattern, but really I wanted something a bit more Prototype-y and (gasp!) readable. If you're not familiar with Prototype's Class, it is neat. They have an easy introduction - Dojo and Mootools have much the same but for Wikizzle I decided to Prototype. Generally, there are two ways people make Javascript classy - with a framework (Prototype, Mootools, Dojo but not jQuery) that adds some new stuff to make it a bit like using a language with classes, or use the language itself aka The Module Pattern. I don't like The Module Pattern. Sure, it does everything I want but it feels icky. Yeah, I'm good at JS, yes, I know Javascript well enough that I can read this and see what you're doing:

function (){
return {
      do_this   :function(){}
      do_that   :function(){}
      eat_a_cake:function(){}
  };
}(); /* close anon function and call */

...but I don't want to. There's a bit of a meme going round that the Module Pattern is more "Javascripty" because it doesn't rely on libraries "doesn’t attempt to re-write the language, but rather to show off what the language can do". Bleh. An anon function which gets called as soon as the curly bracket closes isn't using the language as it was intended, it is bending the meaning of a function into shapes it wasn't intended. The source order is unintuitive; you don't see the closure function being called until after all the object's methods so reading start-to-end you're going through possibly hundreads of lines without seeing how they're being packaged until the final call. Douglas Crockford really likes you to use brackets in your Javascipt. The cool thing about the module pattern is that it leans on closures and closures are powerful data hiders. This is almost a big enough deal to make me want to use it. For example, if I have:

var elvis = function()
{
    var spicy_chicken = new Recepie( /* ... */ );

    return  {
                get_favourite_food: function(){ return spicy_chicken; };
            };

}();

Here we have a private property spicy_chicken, with a getter. Once set, this private value is properly encapsulated in the closure and can never be changed. It is completely impossible for some other bit of code to read it without going through the getter. So long as Recepie is imutable it is impossible for some other code to tamper with Elvis's tastes in food. If you wanted the value to be changeable you could add a setter, but otherwise nothing can change it. Under Prototype classes you can't really do this. Instead I generally go with:

var Elvis = Class.create(
{
    initialize:
        function()
        {    this._spicy_chicken = new Recepie( /* ... */ );
        }
,   get_favourite_food:
        function()
        {    return this._spicy_chicken;
        }
});
var elvis = new Elvis();

Here the initial underscore char in the attribute name is an informal way of saying it is private. Nothing is enforced, but this is a well recognised convention. You could call:

elvis._spicy_chicken = new Recepie( 'green leaves', 'balsamic vinegar' );

Which we'd all agree would be bad. There's nothing to stop you doing this but my attitude is the shrug. The attribute isn't properly private but in real-world usage this doesn't cause any problems because programmers tend to know not to directly use things starting with an underscore. Generally my javascript code isn't executed in a hostile environment. Sure, you can put my code in your app and use it in ways I'd rather you didn't, but, seriously, you're only breaking your own application :-). The above code isn't enforced as a singleton because there's nothing to stop some other code calling new Elvis() again. Like the above, I'm not sure if this would be a problem in real life but if we can protect against it without hurting readability we might as well have protection. Until recently I would write Singletons this like:

var Elvis = Class.create(
{
    initialize:
        function()
        {
            if( Elvis._instance )
                throw( "you can't create another Elvis. Use Elvis.get() instead" );

            this._spicy_chicken = new Recepie( /* ... */ );
        }
,   get_favourite_food:
        function()
        {
            return this._spicy_chicken;
        }
});

Elvis._instance = new Elvis();
Elvis.get =
function()
{    return Elvis._instance;
};

Not bad but we still have a bunch of instantiation and boiler plate that has to be done for every singleton class we create. Wouldn't it be neat if we could write this once and never bother with it again?

Now, where was I?

Ah yes, my very cool new way, singleton.js lets you just do this:

/* Makes a singleton prototype Class Use like:

var Elvis = SingletonClass.create( [superclass ,]
{
        initialize:
            function()
            {    be_born();
                 have_music_career();
                 get_fat();
                 pretend_to_die();
            }
,       toString: function(){ return "the one and only Elvis!" }
,       sing:     function(){ alert("Evlis is singing") }
,       swing:    function(){ alert("Evlis is swinging")}
,       live:     function(){ alert("Evlis lives!")}
));

Elvis is now a Singleton. This is a normal Prototype class but calls to new Elvis() will throw an exception. The Class has a method get() which returns the single instance. Having created Elvis, we can use him like:

Elvis.get().swing();

The instance is hidden by a closure so .get() is the *only* way to get it instance. Attempting to create another will throw an error and you didn't have to do anything in your initialize function to get this :-) Here's the code:

/*
SingletonClass.create takes any parameters Class.create does. Returns a Prototype class which cannot
be instantiated, but has a get() function to return the sole instance.
*/
var SingletonClass =
  {
      create:
          function singletonclass__create()
          {
              var ProtoClass = Class.create.apply( Class, arguments );

         //   instance hidden inside our closure:
              var instance;

         /*   extend the Class created above to make a new class that
              can only be instantiated once: */
              ProtoClass =
                  Class.create( ProtoClass,
                                {
                                    initialize:
                                        function( $super )
                                        {
                                            if( instance )
                                                throw( "cannot create another - this is a singleton" );

                                            $super();
                                        }
                                });

              instance = new ProtoClass();

       //     Allow access to instance via a Class function:
              ProtoClass.get = function (){ return instance; };

              return ProtoClass;
          }
  };

There might be a later version by now. Get the latest singleton.js from Wikizzle trunk.