I am right now at @media Ajax 2008 getting ready to go on stage to deliver my “Scripting Enabled” talk, explaining how the main issue about accessibility is that we just don’t talk enough to each other. Technology is never really the boundary we have with accessibility, it is that we don’t understand how people work and what technology is capable of.

[slideshare id=598740&doc=atmediaajaxscriptingenabled-1221470402418982-9&w=425]

Links in the presentation

• Hack injecting lang attributes into twitter feeds, looping them through the Google translation API
• Presentation of accessibility hacks that are in use on Yahoo sites
• Yahoo Live
• Yahoo Live deaf chatroom
• Antonia Hyde’s presentation on learning disabilities and online video
• Easy YouTube
• Yahoo Video – turn JavaScript on and off
• Timed captioning hack for YouTube
• Annotations hack for YouTube
• Tubecaption.com
• SoundManager2
• JavaScript Karaoke Engine
• JW Player
• JW Player with Audio descriptions and captions
• Access Enabling Ajax
• WebVisum
• IBM’s social accessibility project
• Scripting Enabled

I just came back from the Fronteers conference in Amsterdam. I was part of a panel on JavaScript and gave this talk about using JavaScript in large and distributed teams. There’ll be a video available soon, and I will also do a more in-depth report. For now, here are the talk slides:

[slideshare id=596899&doc=fronteersmaintainability-1221333679665493-9&w=425]

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?

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?

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.