Christian Heilmann

You are currently browsing the Christian Heilmann blog archives for August, 2008.

Archive for August, 2008

Creating progressively enhanced DOM applications with ViewsHandler

Tuesday, August 19th, 2008

When I taught a bunch of students last month the ways of the DOM and explained progressive enhancement they were very happy about the ideas but rightfully exclaimed that DOM scripting can get verbose and repetitive. This is when I had to idea to write ViewsHandler , a small framework to write DOM applications.

ViewsHandler is not meant to be a JavaScript templating engine, as I found that whilst you have to create a lot of HTML with DOM, the parts that change in the app are not that many. Templating engines would replace the whole view, ViewsHandler instead offers you to create HTML, add it to a shell or application canvas and store references to the parts that change. That way you only create your HTML once and then only do minor changes to cached DOM elements when you need to.

As a demo I created a small Flickr slide show using ViewsHandler which was exactly the task that I had given my class :)

What do you think?

Scripting Enabled – how accessibilty concerns can fuel mashup innovation

Friday, August 15th, 2008

I just came back from Stanford where I talked about Scripting Enabled, what lead to it, how I build Easy YouTube and generally how giving hack events and unconferences an accessiblity spin can rejuvenate the movement and drive innovation. The slides are available here and the video will follow once Stanford has finished captioning it.

[slideshare id=553629&doc=scriptingenabled-1218646262025037-8&w=425]

Talking about Scripting Enabled and accessibility hacking at Stanford

Friday, August 8th, 2008

Next Thursday, the 14th of August I’ll be guest at Stanford University to give a talk about accessibility hacking and Scripting Enabled.

Get all the details on the Stanford Online Accessibility Program Site

How to get all IDs and classes used in a document?

Monday, August 4th, 2008

This was a question from one of the attendees of my JavaScript course, and here is one solution:

 function getIDsAndClasses(elm,parent){
   var elm = elm || '*';
   if(typeof parent !== 'undefined'){
     if(typeof parent === 'string'){
       var parent = document.getElementById(parent) || document;
     }
   } else {
     var parent = document;
   }
   var elms = parent.getElementsByTagName(elm);
   var ids = [];
   var classesFilter = {};
   var i = elms.length;while(i--){
     if(elms[i].id !== ''){
       ids.push(elms[i].id);
     }
     if(elms[i].className !== ''){
       var singles = elms[i].className.split(' ');
       var j = singles.length;while(j--){
         classesFilter[singles[j]] = singles[j];
       }
     }
   }
   var classes = [];
   for(var i in classesFilter){
    classes[classes.length]=classesFilter[i];
   }
   return {ids:ids,classes:classes}
 }

You can call this method either with no parameters or filter it down by providing an element name and a parent element. The parent element could be a DOM reference or a string, both work.

In any case, the output is an object with a property of ids containing an array of ID names and a property called classes with an array of class names.

The script filters out duplicate classes and gets all applied classes – provided they are space separated.

You can see it in action (in the FireBug console) here: Test getIDsAndClasses

I tried using regex to get the IDs and classes, but that turned out to be a mess in JavaScript.

Any faster way?

Conjuring YUI from thin air

Saturday, August 2nd, 2008

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.