Last weekend I went to Atlanta, Georgia to speak at the Webmaster Jam Session or short WJS organized by Coffeecup software. I’ve written a detailed report on the event on the YDN blog and in short it was fantastic.

One of the things I did at the event is sit in on one of the Website Smackdown sessions, which are expert reviews of web sites people in the audience submitted. One of the sites was the following:

What shocked me about it was that it is fairly new, but still uses tables for layout. When I investigated I heard that the reason is simply lack of resources to build web sites in a different manner. This is sad, as nowadays we have resources to build upon readily available on the web that we couldn’t even dream of when I started developing. To prove the point that you can re-do a small info site like this one using semantic markup and CSS without even knowing much about it, I used the YUI grids and created the following in roughly 15 minutes:

You can download the web site demo files and play with them yourself.

I’d be happy to write more, in-depth articles about this kind of structure and redesign if there is interest. The only question I have about it is where to publish them? People that would benefit from these are not likely to read the blogs and magazines I write for. Is there a government web standards publication somewhere?

I just spent several splendid days at the Ajax Experience in Boston, MA and was asked to deliver a talk about the YUI. Here’s what I went for: I wanted to make very clear that while YUI is a library much like the others, the real power of it lies in the control it gives you over the whole frontend development process from start to end.

• The CSS components make sure that creating CSS based layouts and typography are as easy cross-browser as libraries make JavaScript development
• The YUI DOM control allows you to monitor the size of the browser window, the position of the document in the window and the dimensions of any element. You can use this power to control things like fixed positioning and element overlap and even monitor font resizing.
• I explained the concept of Custom Events and how the -debug versions of YUI will notify you as a developer at any moment of execution about the internal happenings.
• I showed the development tools – the YUI logger, profiler and test suite and how they make your development process much less random.

The slides are available on slideshare and here are the code examples mentioned in the slides for browsing and to download as a zip.

[slideshare id=631005&doc=yui-for-control-freaks-a-presentation-at-the-ajax-experience-631005-1473&w=425]

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.

My esteemed colleage Klaus Komenda seems to spend as much time as I do writing cool stuff for the masses, but somehow he doesn’t crop up in a lot of to-read lists. For shame, I say, pulling up my trousers until they reach my armpits (yes, I watched Simpsons) and I point you, esteemed reader to a series of articles explaining the YUI from ground up entitled Agent YUI:

• Get a lot of easy-to-understand YUI tutorials here

Yes, I am also taken with them as I like Bond a lot.

I am currently in Sunnyvale, California to teach a bunch of bright young people the ways of the DOM and YUI. I am one of the trainers in the Juku project of Yahoo! (alongside Ross Harmes and Douglas Crockford) and give a 12 day intensive course. Naturally, this keeps me busy and I don’t get to blog as much – or so I thought. Actually I don’t see much harm in doing a day-by-day report on what we covered here, as a reminder for myself and maybe an inspiration for your own training courses.

Day one is traditionally for me the day to test the waters and see how my style of training suits the group. I hate sitting in lecture-style training with a massive binder and interspersed with coding exercises that are more hello world than anything useful. Instead I do more of a hands-on style where I try to get the attendees to form and run most of the course with me aiding by steering and helping out. There is an overall master plan for the course (you have to cover x amount of content in y amount of time, after all) but the individual days might differ a lot according to the subject matter. I normally tend not to use the computer as much as possible (as it leads people to surf around and get distracted with work mail) but in this case this’d be tough to do.

I got to know the attendees and asked them who they are, what they do, why they are here and what they want to get out of the course. I was very happy to hear that whilst the subject knowledge level of the group differs greatly from member to member, they all wanted to “learn how to apply things in the real world” and “get in-depth knowledge of how browsers deal with the DOM and DOM scripting”.

I started by explaining that DOM scripting is more than just manipulating the DOM but that we coined the term (in the now defunct WaSP working group) as a quality mark of DHTML development. I re-iterated the need for separation of development layers and the ideas behind progressive enhancement.

• We set up a valid HTML document, explaining what is needed for any document to become one – doctype, a title, encoding, language, reading direction and all the necessary elements.
• We talked about where to put styles and scripts and the impact of their location on performance
• We then went to learn about the DOM, setting up and using Firebug to play with it and took a look at getElementById() and getElementsByTagName().
• We talked about optimizing for loops and iterating over resulting HTMLCollections with as few code as possible whilst not sacrificing maintainability or performance.
• We went into reading HTML attributes and discovered the pains of reserved words like class and for
• Last but not least we created our own getElementsByClassName function.

The last aspect was especially interesting, as I deliberately kept the specifications of the function loose and asked the group to plan it on a whiteboard before plunging into it. The discussion around the planning showed that there are millions of ways to approach this problem and that if you mix developers that come from a UI-centric background with hard-core C++ developers you get interesting approaches to the same problem

You can see the results of the different teams in this document. The different examples are commented out with the quick commenting trick so to try them out, just add another slash in front of the /* preceeding the functions.

Day two is about to start…