I love the YUI loader as it is a great way of including the YUI on the fly. The coolest bits about it is that it gets the YUI components from the CDN and knows the dependencies so I don’t have to. So if I need the YUI for something, I don’t need extra SCRIPT nodes a maintainer has to include, just my SCRIPT. However, what we still need is including the YUI loader itself.

Unless… you use the YAHOO_config listener. This thing is older than both YUI get and YUI Loader and is an object method that gets called every time a YUI component is loaded. So why not load the YUI Loader using this?

One problem is that the YUI Loader doesn’t call the config listener saying it is a loader, but saying it is the get utility. Another issue is that it does not work to execute the Loader immediately after it called itself “get”. The workaround is to use a timeout.

Wrap all of that inside the YAHOO_config object and you’ll conjure the YUI out of thin air. The following example loads YUI Dom, YUI Event and alerts “done” once all is ready. Check it out here

YAHOO_config = function(){

var s = document.createElement(‘script’);

s.setAttribute(‘type’,’text/javascript’);

s.setAttribute(‘src’,’http://yui.yahooapis.com/2.5.2/’+

‘build/yuiloader/yuiloader-beta-min.js’);

document.getElementsByTagName(‘head’)[0].appendChild(s);

return{

listener:function(o){

if(o.name === ‘get’){

window.setTimeout(YAHOO_config.ready,1);

}

	
},

ready:function(){

var loader = new YAHOO.util.YUILoader();

var dependencies = [‘yahoo’,’dom’,’event’];

loader.require(dependencies);

loader.loadOptional = true;

loader.insert({

onSuccess:function(){

console.log(‘done!’);

}
	
});

}
	
};

}();

Thanks to Alex Liu to get the setTimeout trick.

During the course I am currently giving in Sunnyvale on basics of the DOM and progressive enhancement I asked the attendees which methods seem to be missing in the native DOM implementation and this is what we came up with:

• createLink(url,text) – a shortcut method to create a link with a text node inside – something you constantly have to do when creating interfaces
• insertAfter(newNode,oldNode) – there is an insertBefore, but no insertAfter
• removeNode(node) – the native removeChild is convoluted
• textElement(elementName,text) – it seems not necessary to create an Element, then create a text node and apply it, this could be one step
• addScript(url) – to lazy-load JavaScripts
• normalizeNode(node) – to remove those pesky line-breaks that interfere with nextSibling or previousSibling
• getText(node) – retrieving the text content of a node that is either a text or an element node
• setText(node,text) – setting the text regardless of node type

I asked the attendees to come up with a method each and to present them, here’s what we got:

jukuhelpers = function(){

function createLink(url,text,cssClass){

var link =  document.createElement(‘a’);

if (typeof url = 'string'){

link.setAttribute('href', url);

}

	
if (typeof text = ‘string’){

link.appendChild(document.createTextNode(text));

}
	
if (typeof cssClass = 'string'){

link.className = cssClass;

}
	
return link;

}
	
function insertAfter(newNode,oldNode){

oldNode.nextSibling

? oldNode.parentNode.insertBefore(newNode, oldNode.nextSibling)

: oldNode.parentNode.appendChild(newNode);

}
	
function removeNode(node){

if (node) {

node.parentNode.removeChild(node);

}
	
}

function textElement(elementName,text){

if (typeof text = ‘string’){

var txtElement = document.createElement(elementName);

var txtNode = document.createTextNode(text);

txtElement.appendChild(txtNode);

}
	
return txtElement;

}
	
function addScript(url){

var s = document.createElement(‘script’);

s.setAttribute(‘type’, ‘text/javascript’);

s.setAttribute(‘src’, url);

var head = document.getElementsByTagName(‘head’)[0];

head.appendChild(s);

}
	
function getText(node){

var txt;

if (node && node.nodeType = 1) {

if (node.hasChildNodes()) {

txt = node.firstChild.nodeValue;

}
	
}

if (node && node.nodeType = 3) {

txt = node.nodeValue;

}
	
return txt;

}
	
function setText(node,text){

if (node && node.nodeType = 1) {

if (node.hasChildNodes()) {

node.firstChild.nodeValue = text;

}
	
else {

node.appendChild(document.createTextNode(text));

}
	
}

if (node && node.nodeType = 3) {

node.nodeValue = text;

}
	
}

function normalizeNode(node){

if(node.hasChildNodes){

var spaceTest = /^s+$/;

var children = node.childNodes;

for(var i=0;children[i];i++){

if(children[i].nodeType === 3){

if(spaceTest.test(children[i].nodeValue)){

children[i].parentNode.removeChild(children[i]);

}
	
}

}
	
}

}
	
return{

createLink:createLink,

insertAfter:insertAfter,

removeNode:removeNode,

textElement:textElement,

addScript:addScript,

getText:getText,

setText:setText,

normalizeNode:normalizeNode

}
	
}();

You can get the jukuhelpers.js file if you want to use it yourself.

Anything else that is missing or any bugs in this?

The last few months Chris Mills from Opera was busy gathering a lot of great web development experts around him (with a lot of pimping by yours truly) to assemble probably the most thorough and up-to-date web standards curriculum on the web: The Opera Web Standard Curriculum

Several dozen articles, all licensed with Creative Commons will be available to cover the tasks of web development: from understanding the principles of the web up to Ajax interaction. During the whole course the main focus is on usability, accessibility and writing maintainable code. We deliberately left out browser hacks and backward facing solutions and build on the ideas of progressive enhancement and unobtrusive JavaScript.

I wished this would’ve been out when I started, it’d have saved me a lot of time learning bad practices and un-learning them (which is always a painful process).

So, read it, use it and teach younglings the way of the standards Jedi: The Opera Web Standard Curriculum

As several people asked how I did the easier Flickr interface, I wrote up some step-by-step instructions, analyzing the issues and then taking the API to work around them.

Check out How to create an alternative Flickr interface – step by step.

This is one example where providing a good API can empower developers to remove barriers you might not be aware of for you. I hope to be able to show you more of those in the future.

The code examples are available and are licensed with BSD, so feel free to re-use them.

This was a question I got in the office today and there is no shame in asking it:

I am using Event Delegation on one of my products and I need to stop the main handler on the body from firing when I click a certain button. How do I do that?

The answer is of course to use stopPropagation() or cancelBubble(), both nicely wrapped in YAHOO.util.Event.stopPropagation():

HTML:

JavaScript:

YAHOO.util.Event.onContentReady(‘buttons’,function(){

YAHOO.util.Event.on(document.body,’click’,function(e){

var t = YAHOO.util.Event.getTarget(e);

snitch(‘
It was the ’ + t + ’ that was clicked
‘);

});

YAHOO.util.Event.on(‘tease’,’click’,function(e){

snitch(‘
that was the first button
‘);

YAHOO.util.Event.stopPropagation(e);

});

YAHOO.util.Event.on(‘tease2’,’click’,function(e){

snitch(‘
that was the second button
‘);

});

function snitch(msg){

document.getElementById(‘littlesnitch’).innerHTML += msg;

}

	
});

Try it out here: Overriding Event Delegation with stopPropagation