Finally I can announce the 2.3.0 release of the Yahoo! User Interface Library. Internally we had a chance to play with some of the library news already and there is a lot of cool stuff to see:

• An experimental image loader utility that is much like my http overhead delay on steroids
• A rich text editor for those who don’t like markdown markup or textile
• A colour picker
• A loader utility to embed the YUI on the fly from a hosted environment
• A testing framework to automatically test your apps.

It is also cool to see that a lot of minor bugs and improvements found and reported by the team in the UK have been implemented by the YUI folks. Most of these are way under the hood, like a long overdue insertAfter method and next and previous sibling methods that don’t report linebreaks.

[tags]YUI,yahoo,library,javascript,rich text editor,testing[/tags]

Hmm, now here is an interesting task. I was asked to find an inline “code editor” which means a script or a flash widget or a (shudder) applet that allows for editing of code (PHP, JavaScript, HTML, CSS) inside an application. There are a lot of inline Rich Text editors and even some WYSIWYG editors, but the online editor that allows you to properly code inside an HTML document is CodePress.

Have you come across others?

[tags]CMS,inline editing,code editors,syntax highlighting[/tags]

Back in February 2006 I declared my love for the object literal explaining that it is a great way of making sure your scripts don’t interfere with others as all you expose to the world is a single object name. Instead of

function init(){}
function doStuff(){}
var myMessage = 'oi, gerrof!';

which might be easily overwritten you can use

myScript = {
  init:function(){}, 
  doStuff:function(){}, 
  myMessage:'oi, gerrof!'
}

and this way make sure that they don’t get overwritten or overwrite other methods or variables. You can access them as myScript.init(), myScript.doStuff() and myScript.myMessage. I liked this idea so much I argued for a length of time with my technical editor at that time that I want my book to be based on this kind of scripting or not at all.

The only annoyance I had with this is that it still leads to rather big methods, as you have to use the long name for every call of variables inside the object. True, you can use this, but when you use event handling and you don’t use the scope correction of the YUI event you’ll use that for the element the event occured on.

myScript = {
  init:function(){
    this.doStuff();
  }, 
  doStuff:function(){}, 
  myMessage:'oi, gerrof!'
}

Is therefore not necessarily possible, so you need to use:

myScript = {
  init:function(){
    myScript.doStuff();
  }, 
  doStuff:function(){}, 
  myMessage:'oi, gerrof!'
}

This, in much more complex scripts, can lead to a lot of code and typing (unless you use an IDE) and just seems bloated. I had a lot of problems fitting object literal scripts into 80 character code templates for the book and magazine articles for example.

The solution to shorter code is once again a thing from the mad JavaScript scientist’s lab of Douglas Crockford called the Module Pattern. If you want a very detailed and good explanation of what it does in terms of OO sorcery, check out the easy to follow explanation of the Module Pattern by Eric Miraglia on the YUI blog.

What the Module Pattern does for me on top of that is that it keeps my code short. I only expose those methods as public that need to be and then I can call them inside the main object by name of the method and not by objectname.methodname.

myScript = {
  massivelyLongVariableProbablyGerman:1,
  thisIsReallyLong:function(n){},
  doStuff:function(n){},
  init:function(){
    myScript.doStuff(myScript.massivelyLongVariableProbablyGerman);
    myScript.thisIsReallyLong(myScript.massivelyLongVariableProbablyGerman);
  }
}
myScript.init();

becomes

myScript = function(){
  var massivelyLongVariableProbablyGerman = 1;
  function thisIsReallyLong(n){};
  function doStuff(n){};
  return {
    init:function(){
      doStuff(massivelyLongVariableProbablyGerman);
      thisIsReallyLong(massivelyLongVariableProbablyGerman);
    }
  };
}();
myScript.init();

However, there are two problems remaining: if you want to call one public method from another public method you’d still need to go either via the this route or by prepending the main object name:

myScript = function(){
  var massivelyLongVariableProbablyGerman = 1;
  function thisIsReallyLong(n){};
  function doStuff(n){};
  return {
    init:function(){
      doStuff(massivelyLongVariableProbablyGerman);
      thisIsReallyLong(massivelyLongVariableProbablyGerman);
 
      otherPublic() // < - has MASSIVE FAIL! 
      this.otherPublic() // <- works 
      myScript.otherPublic() // <- works 
 
    },
    otherPublic:function(){
    }
  };
}();
myScript.init();</>

The other problem is that I am not too happy about the return {} with all the public methods in it, it still looks a bit alien to me. Caridy Patiño offered a solution to that problem on the YUIblog by simply creating an object with a short name inside the main object that can act as a shortcut for public methods to call each other:

var myScript = function(){
  var pub = {};
  var massivelyLongVariableProbablyGerman = 1;
  function thisIsReallyLong(n){};
  function doStuff(n){};
  pub.init = function(){
    doStuff(massivelyLongVariableProbablyGerman);
    thisIsReallyLong(massivelyLongVariableProbablyGerman);
    pub.otherPublic();
  };
  pub.otherPublic = function(){
  };
  return pub;
}();
myScript.init();

This also saves me one level of indentation which means I can fit even more code in 80 characters. I will use that much more in earnest now.

UPDATE

If you like what you see here, take it up another notch with the revealing module pattern

As some of you know, Meri Williams has set up a Wiki for people who want to become speakers at summits and events at http://www.makemeaspeaker.com/ (currently spammed :-() and I am a very big fan of the idea (even pimped it in my Highland Fling Talk).

However, except for some minor changes to the Wiki and some posts about it not much happened, which is why I am taking the initiative to take it a bit further. I already chatted to several people and we’ll organize “Make me a Speaker” events in London soon. The format will be pretty straight forward:

• Prospective speakers have 5-10 minutes (depending on how many sign up) to present a topic of choice
• A panel of “experts” (organizers of events, experienced speakers) will give advise and praise afterwards as to what was good and what needs improvement
• Both the panel and the audience vote for the best presentation of the evening and the winners will get a small prize.

I already got feedback from Foyles (the bookstore) to sponsor books as prizes and I am thinking of using the Yahoo! office in Covent Garden, London and BBC’s Bush House in Charing Cross, London (with thanks to Ian Forrester) alternately as the location of the event.

All that is left now is to sort out a date when to do this (and my calendar is quite full right now) and actually gauging if there is interest in something like that.

So what say you?

[tags]makemeaspeaker,public speaking,meriwilliams,christianheilmann,ianforrester,bbc,yahoo,london[/tags]

Following my post yesterday about delaying the loading of avatar images to cut down on HTTP requests I was wondering if there is a way to do this without having to resort to a server side solution. In short, there is.

• Check out the demo page to see the script in action, and download delayHTTPoverhead.js to use in your own sites.

Using the script is dead easy, simply include it in your page and make sure to include avatar images in the following format:

<img src="default.gif#http://avatarurl" ... >

The default.gif is your placeholder followed by a hash and the real URL. All the script does is go through all the images, check which one has a hash in its src attribute and remove everything up to the hash. If you don’t want to loop through all the images in the document, you can change two variables in the script: You can provide the ID of an element to constrain the loop to in parentID and you can provide a class that is applied to all the avatar images in avtClass. The script is Creative Commons Attibution licensed, so go nuts using it.

Here is the script’s saga: the internet’s Drew McLellan commented yesterday on the blog about the usefulness of the idea and we talked over lunch and then Messenger how we could make it JS-only. First Drew considered the real URL as a parameter after the placeholder, but that messed with the caching as each default.gif?foo would be considered an unique URL. We then thought about fragment identifiers, as for a browser foo.html and foo.html#bar is the same resource.

We weren’t sure about the validity of a real URL as a fragment identifier, and as we are too lazy to look these up I consulted the walking standards encyclopedia, David Dorward and got the green light for the fragment identifier idea. On my way out the office I put the idea past Lawrence Carvalho who thought it necessary to allow for a parent ID and a class to constrain the amount of replaced images. Five stops later on the Picadilly line the script was done and now I am uploading it. It is great to have the right people working next to you.