On the second day of the current Juku program we covered the “read” sections of DOM scripting: attributes, node properties and how to navigate around the document with a certain node as the starting point (nextSibling,previousSibling,parentNode,childNodes…).

• We also talked in detail about nodeTypes and how to recognize what is an element and what is a text node, which of course brought up the concept of whitespace in HTML as annoying “node-noise”.
• We covered the difference between element.attribute and element.getAttribute(attribute), especially when it comes to reading out the href attribute of links.
• We did a script planning session on a whiteboard analyzing the HTML of a document to find out the shortest way to reach a certain element discussing various approaches.
• We covered manipulation of the style property, its dangers (mixing presentation and structure, hurting maintainability) and its good uses (creating same-height columns using offsetHeight).
• We covered avoiding the style property by dynamically adding CSS classes and the problems with this (testing for existing classes)
• We covered cutting down your DOM scripting to the lowest form, avoiding large looping and conditional testing by using getElementsByTagName instead of traversing the node tree.
• We covered changing of text node content by manipulating the nodeValue property

Today we’ll start creating new content using the DOM.

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…

I’ve met with the lovely people from Gamelab and the Metropolitan University on Friday and we finalized the details of Scripting Enabled.

Scripting Enabled is a two day event in London on the 19th and 20th of September 2008. The goals of the event are:

• to build accessible interfaces to currently inaccessible services,
• get hackers and non-technical people who know about accessibility problems to talk and
• release documentation and tools based on real issues to make the web a more inclusive place.

This event is separated into two different parts and you need to book separate tickets!

The first day is dedicated to getting real information about accessibility barriers of online systems and techniques to work around them. This day is for:

• Developers that will come on the second day to find out what needs building
• Anybody who wants to learn about accessibility barriers from those who get blocked by them and not from theory
• Anybody who wants to share their experiences in being blocked out from online services because of their ability

The second day is a development event where we will try to build solutions and alternative interfaces into existing systems that work around the issues we learned about on the first day.

This day is for:

• Developers that want to build truly accessible interfaces and legal hacks around currently inaccessible systems
• People that can give real information based on research and user testing to hep developers build the right things
• Testers that can give us a real user experience rather than having to simulate it.

Go and book your tickets now

Today I went again to help out AbilityNet with one of their workshops talking to a small group of developers and project managers about the problems with Ajax and Accessibility and general Web2.0 concerns. Instead of giving a lot of technical details I tried to point the audience to good resources and get them to find out more for themselves. I hope I succeeded.

[slideshare id=514640&doc=ajaxandaccessibilityredux-1216171321459432-9&w=425]

For the first time I also successfully recorded the talk in mp3 format using the mac powerbook. GarageBand is great for recording, but the editing features suck, good old Audacity came to the rescue. Bear in mind I had 4 hours sleep and a day of presentations behind me when I did this one, and it is more fun to see me explain some of the pauses with gestures :)

• Download the audio of the talk Again with the Ajax Accessibility – MP3 34.5MB
• Download the PDF of the talk Again with the Ajax Accessibility – PDF 4MB

Two weeks ago I went to East London to give a “brown bag” presentation at the office of the Guardian. In a very crowded room around 30 developers sat and listened to me raving about best practices in web development and what the YUI already solved for you.

There is a very nice write-up on the inside guardian blog and they also host the podcast mp3 of the talk.

The slides for the talk are on slideshare:

[slideshare id=488632&doc=happylittlewebsites-1214566328957709-8&w=425]

It is very cool to see your name on an old-school media site and the way they wrote up what the talk is about makes me realize that journalism will never be replaced by blogging and twitter.