Bitstructures

Open Web Podcast

2008-09-04T08:04:41-05:00

ondemand.js

2008-07-06T18:06:42-05:00

This weekend I finished up some code that I'd started a little while ago but hadn't had the chance to complete: a function, that can be used in the progressive enhancement style, for showing and hiding parts of a web page on demand.

Example

Source for example:

<script type="text/javascript" src="dojo/dojo.js"></script>
<script type="text/javascript" src="ondemand.js"></script>
<script type="text/javascript">
    dojo.addOnLoad(function(){
        ondemand("ondemand1", "Show Details", "Hide Details");
    });
</script>

<div id="ondemand1">
<form id="form1" action="#">
<p><label for="tags">Tags:</label><br>
<input id="tags" type="text"></p>
<p><label for="description">Description:</label><br>
<textarea id="description" rows="5" cols="30"></textarea></p>
<p><button type="submit">Save</button></p>
</form>
</div>

Usage

ondemand(elem, showLabel, hideLabel)

elem: the element to make on demand (either an element object reference or an id)
showLabel: the label for the button to show the element
hideLabel: the label for the button to hide the element

The function hides the specified element and inserts a button into the document to show and hide the element again. To use in a progressive enhancement style, include the part of the web page that you'd like to be shown and hidden on demand as static content, and then call the ondemand function on it. If JavaScript is turned off, the content will always be shown and there will be no button to hide or show the content.

Source code

ondemand.js

Progressive enhancement and flicker

Due to the page being reworked after loading you may see flicker as the content is initially shown and then quickly hidden. One approach for minimizing the flicker is to add a document.write statement that inserts a CSS rule to hide the content to be made on demand before it appears in the document. For example:

Content-Type: text/plain
document.write('<style type="text/css">#ondemand1 {
    display: none }</style>');

The document will still change after the page is loaded, as the button is inserted, but the change will be smaller than before and it will be additive rather than subtractive.

Firefox 3 released!

2008-06-17T19:46:41-05:00

Congratulations Mozilla! Firefox 3 is out today.

Some highlights, for me:

faster performance
Mac OS X integration
the awesome Awesome bar and new Places database
goodbye modal remember password dialog, hello modeless goodness
the new site information user interface makes it very easy to access security information for the site that you are currently using
and, of course, the updated ARIA implementation

Mike Beltzner has put together a nice screencast introducing some of the new features, including the awesome bar, site information, malicious site block, and new features for the download window and add-ons dialog.

Installing Accerciser on Ubuntu 7.10

2008-03-01T15:06:20-06:00

I recently installed the awesome Accerciser accessibility testing tool on my Ubuntu 7.10 virtual machine. I installed the trunk version from subversion and needed these packages:

subversion
gnome-common
libglib2.0-dev
libgconf2-dev
ipython

I checked out, built, and installed Accerciser with:

Content-Type: text/plain
$ svn co http://svn.gnome.org/svn/accerciser/trunk accerciser
$ cd accerciser
$ ./autogen.sh
$ make
$ sudo make install

The "make install" installs a binary called "accerciser".

Ajax Pub Nite #1

2008-01-15T20:58:41-06:00

Last night I went to the first Toronto Ajax Pub Nite at The Rhino on Queen West. It was clearly the right location for a JavaScript get together as not only is the rhino the animal featured on the cover of David Flanagan's JavaScript: The Definitive Guide ("the Rhino book") and the name of a JavaScript engine, but they also have free wifi! We'll be meeting at The Rhino on the second Monday of each month (February 11 is next up). If you're doing cool web stuff and you're in Toronto, come along!

Running IE6 and IE7 on the same machine with Virtual PC

2008-01-11T13:16:02-06:00

Dojo supports both IE6 and IE7 so when developing it's important to test on both of these browsers. And it's nice to be able to test both browsers on the same machine.

My Windows XP has IE7 installed and to test on IE6 I was, until recently, using the "standalone" packaged version of IE6 from the evolt.org browser archive. However, its behaviour is not always consistent with a regular IE6 install on other computers.

I've just switched to another solution: virtualization with Virtual PC. Microsoft offers Virtual PC as a free download and also offers a free Virtual PC image of Windows XP with IE6 (an image of Windows XP with IE7 is also available from the same download page). The images have been available for a while (announced on the IEBlog in November 2006) and have been regularly updated.

For testing, I run a web server on my local machine and my browsers can access it with "http://localhost/". But I can't access the web server with "localhost" inside the virtual machine — it'll point to the virtual machine. To access my web server from the virtual machine I've been using the IP address of the host machine (you can get the IP address by running "ipconfig"). So, if my host machine, running the web server, has IP address 1.2.3.4 then I'd use "http://1.2.3.4/" inside the virtual machine.

Getting, setting, and removing tabindex values with JavaScript

2008-01-09T14:07:25-06:00

I recently implemented some functions for Dojo for getting, setting, and removing tabindex values. And, as it wasn't entirely straightforward, I've written up a post for the Fluid project blog on what I found out.

ARIA and jQuery and YUI

2008-01-06T21:52:31-06:00

Couple of recent ARIA developments:

Chris Hoffman has built a jQuery plugin called jARIA for getting and setting ARIA roles and states; the source can be found at http://www.outstandingelephant.com/jaria/jARIA.js
Todd Kloots and Victor Tsaran have written up an article on using ARIA with the YUI menu: Using WAI-ARIA Roles and States with the YUI Menu Control

ARIA support in Internet Explorer

2008-01-06T16:33:50-06:00

"Internet Explorer Support of Web ARIA via UIA Express" is listed as a current project on the website of the recently-formed Accessibility Interoperability Alliance (AIA). No further details or timeline but it's really good to see that ARIA support in Internet Explorer is planned. The AIA has a three-person steering committee consisting of Andrew Kirkpatrick from Adobe, Claudio Giugliemma from QualiLife, and Rob Sinclair from Microsoft.

Functions, closures, and objects: implementing a filter function in Scheme and Java

2007-12-24T14:00:19-06:00

Continuing with the theme of functions and closures (Registering JavaScript object methods as callbacks, Python bound methods), I thought I'd have a look at the relationship between functions, closures, and objects. I'll build a filter, that returns elements from a collection for which a given predicate is true, in Scheme (a language with first-class functions and closures, but no objects), and in Java (a language with objects, but no first-class functions or closures.)

A function is an object with an "apply" method

In Scheme we can define a filter function that takes two parameters: a function (the predicate), and a list. It will call the predicate function on each element in the list, returning a new list containing all of the elements for which the predicate is true:

(define (filter pred lis)
  ; if lis is empty
  (if (null? lis)
    ; return an empty list
    '()
    ; otherwise, if the predicate is true on the first element
    (if (pred (car lis))
      ; return the first element concatenated with the
      ; result of calling filter on the rest of lis
      (cons (car lis) (filter pred (cdr lis)))
      ; otherwise (if the predicate was false) just
      ; return the result of filtering the rest of lis
      (filter pred (cdr lis)))))

We can then define a predicate and use it to filter:

(define (non-negative n)
  (>= n 0))

(filter non-negative '(-2 3 7 1)) ; (3 7 1)
(filter non-negative '(100 -9 8)) ; (100 8)

In Java, we don't have first-class functions, but we do have objects. And we can define a Predicate as an object with a public method that takes a single parameter and returns a boolean:

public interface Predicate<T> {
    public boolean apply(T arg);
}

We can now write our Java filter function as a method that takes two parameters: a Predicate and a Collection:

import java.util.Collection;
import java.util.List;
import java.util.ArrayList;

public class Utils {
    public static <T> List<T> filter(Predicate<T> pred, Collection<T> c) {
        List<T> filtered = new ArrayList<T>();
        // loop through all the elements in c
        for (T obj : c) {
            // if the predicate is true for the current element
            if (pred.apply(obj)) {
                // append it to the result list
                filtered.add(obj);
            }
        }
        return filtered;
    }
}

NonNegative.java:

public class NonNegative implements Predicate<Integer> {
    public boolean apply(Integer n) {
        return n >= 0;
    }
}

With Predicate, Utils.filter, and NonNegative defined we can now filter:

// as our NonNegative class instances have no state,
// we only need one
Predicate<Integer> pred = new NonNegative();
Utils.filter(pred, Arrays.asList(-2, 3, 7, 1));
Utils.filter(pred, Arrays.asList(100, -9, 8));

The Scheme and Java examples above operated on collections of numbers but the filter functions (and Predicate interface in the Java case) are generic -- they can filter collections of any type and filter on any provided predicate logic.

A closure is an object with an "apply" method and some state

Let's say we want to filter all numbers greater than 4. We could define a greater-than-4 function:

(define (greater-than-4 n)
  (> n 4))

And if we wanted to filter all numbers greater than 1, we could define a function for that too. The greater-than-1 function is going to be very similar to greater-than-4 and it would be quite convenient to write a generic greater-than function:

(define (greater-than m n)
  (> n m))

(greater-than 4 1) ; false
(greater-than 4 20) ; true

Now, if we want to use our greater-than predicate with our filter function, we have a problem: the filter function expects the predicate to be a function that takes exactly one parameter (the element currently being considered), not two.

We can make our greater-than predicate work with our filter function by currying it:

(define (greater-than m)
  ; return a closure:
  ; a function that takes one parameter
  ; with a binding to the value provided for m
  (lambda (n)
    (> n m)))

We have rewritten greater-than to be a builder of functions (that take one parameter, as we need for filter). Rather than calculating if n is greater than m immediately, we delay the test and package it up into a closure and return that. We provide the parameters m and n in two stages: m is provided when we call greater-than (and stored for later use in the closure) and n is provided whenever the function returned from greater-than is called. For example, if we wanted to calculate 1 > 4 and 20 > 4:

(define greater-than-4 (greater-than 4))
(greater-than-4 1) ; false
(greater-than-4 20) ; true
; or, without naming the function
((greater-than 4) 1) ; false
((greater-than 4) 20) ; true

It is this two-stage quality that enables us to use greater-than with our filter function:

(filter (greater-than 4) '(-2 3 7 1)) ; (7)
(filter (greater-than 10) '(100 -9 8)) ; (100)

We can do something very similar in Java, but rather than a closure we use an object. We can implement GreaterThan as a Predicate in which m is provided to the object constructor and stored in an instance variable. The apply method will retrieve it later to perform its test:

public class GreaterThan implements Predicate<Integer> {
    private Integer m;
    public GreaterThan(Integer m) {
        this.m = m;
    }
    public boolean apply(Integer n) {
        return n > m;
    }
}

No changes are necessary to either the Predicate interface or to Utils.filter:

Utils.filter(new GreaterThan(4), Arrays.asList(-2, 3, 7, 1));
Utils.filter(new GreaterThan(10), Arrays.asList(100, -9, 8));

My Arduino arrived!

2007-12-22T13:46:37-06:00

I've always had an interest in input and output devices beyond those typically available on desktop and laptop computers. But I've been limited by my electronics knowledge to build much stuff myself. My understanding of computing is pretty solid down to a certain point but when it comes to electrons and building circuits I'm a little lost. So, I was very excited to recently discover the Arduino open hardware and software platform. It's a small board with an Atmel AVR processor, USB interface, power socket, and input and output pins. There's an open source programming environment based on the Processing IDE with a C-like language (based on Wiring). The Arduino looks like an excellent place for beginners like me to learn microcontroller programming and electronics. I'm making my way through Dan O'Sullivan and Tom Igoe's excellent Physical Computing: Sensing and Controlling the Physical World with Computers and I'll post my experiments here as I start building stuff!

(I bought the Arduino Starter Pack from Adafruit Industries.)

Python bound methods

2007-11-28T22:21:10-06:00

In my last post I looked at registering JavaScript object methods as callbacks. When we reference a JavaScript object method we get a function object, which is not bound to the object that it is retrieved from, and I looked at various approaches that one can use to bind a method to an object instance. I thought it might be interesting to have a look at Python's "bound methods" to see how Python facilitates passing around object method references.

Content-Type: text/plain
>>> class MyObject:
...     def __init__(self, val):
...         self.val = val
...     def get_val(self):
...         return self.val
... 
>>> obj = MyObject(8)
>>> obj.get_val()
8

In Python when we reference an object method we don't get a function but rather a "bound method":

>>> obj.get_val
<bound method MyObject.get_val of <__main__.MyObject instance at 0x71e18>>

A bound method is one of Python's "callable" types (others include functions and generators.) Like a function, a bound method can be called but it is bound to the object that it was retrieved from. And when it is called, it operates on that object:

>>> f = obj.get_val
>>> f()
8

If we need to, it's possible to access a bound method's object and function:

>>> f.im_self
<__main__.MyObject instance at 0x71e18>
>>> f.im_func
<function get_val at 0x64d30>

In JavaScript we had to bind a method to an object instance ourselves to use it as a callback. However, in Python when we reference an object method we get a callable object that is already bound.

Registering JavaScript object methods as callbacks

2007-11-27T10:28:30-06:00

The registration of callback functions is very common in JavaScript web programming, for example to attach user interface event handlers (such as onclick), or to provide a function to handle an XHR response. Registering an object method as a callback function is not entirely straightforward, but there are a number of approaches that we can use.

Let's say we've got a constructor, an object, and a function that registers a callback:

function MyObject(val){
    this.val = val;
}
MyObject.prototype.alertVal = function(){
    alert(this.val);
}

var obj = new MyObject(8);

function register(callback){
    // some time later...
    callback();
}

The constructor stores its single argument, and the alertVal() method alerts it. The simple register() function takes a function and calls it. In a real situation the behaviour here would be much more interesting but this will do for illustration.

Why we don't want to just pass obj.alertVal to register()

Object methods are first-class functions in JavaScript and we could pass obj.alertVal to register() -- but it isn't quite what we want. Let's see what happens:

register(obj.alertVal);
// inside register(), callback === obj.alertVal
callback()
// inside MyObject.prototype.alertVal
alert(this.val);
// because callback() was not called on an object,
// this === the JavaScript global object and not obj;
// this.val is the global variable val, not obj.val

When a function is called as a method on an object (obj.alertVal()), "this" is bound to the object that it is called on (obj). And when a function is called without an object (func()), "this" is bound to the JavaScript global object (window in web browsers.) When we passed obj.alertVal to register() we were passing a reference to the function bound to obj.alertVal, but no reference to the object obj.

So, we need to bind our method to the object.

Closure with an anonymous function

In JavaScript, whenever a function is defined within another one a closure is created [JavaScript Closures for Dummies] [JavaScript Closures]. A closure remembers the variable bindings that were in scope when the function was created. These bindings are then available whenever the function is called. We can bind our method to our object instance with the following:

register(function(){obj.alertVal()});

Whenever the anonymous function is called, "obj" will be bound to the value that it had when the function was created. Which is exactly what we want.

(If we execute the above code outside a function it will behave differently. No closure will be created, instead, the current value of the global variable "obj" will be used whenever the anonymous function is called, not the value at function definition.)

If we want to register a method on the object currently bound to "this", we need to take an extra step:

var obj = this;
register(function(){obj.alertVal()});

If we don't explicitly bind "this" to a named variable (obj) and instead use register(function(){this.alertVal()}) we will lose our object reference. "this" will be bound to the JavaScript global object whenever the anonymous function is called.

Build a generic closure maker

Instead of building a closure each time we want to register a method as a callback, we could write a utility function to do it for us. For example:

function bind(toObject, methodName){
    return function(){toObject[methodName]()}
}

With such a function we can then register our method with:

register(bind(obj, "alertVal"));

Dojo (dojo.hitch()) and Prototype (bind()) both have such utility functions (that also allow you to provide arguments to pass to the method when called, something that our "bind" doesn't do.)

If we want to register a method of "this", we don't need to explicitly bind it (as we did above) before calling "bind" -- the function call does the binding for us. register(bind(this, "alertVal")) works as expected.

Alter the register function to take the object too

If we changed our register function to:

function register(anObject, methodName){
    // some time later...
    anObject[methodName]();
}

We could register our call with:

register(obj, "alertVal");

dojo.connect and YUI's YAHOO.util.Event.addListener() [YUI Event Utility] [YAHOO.util.Event API docs] both include this binding style in their API.

Bind the method to the object at construction

We could bind our method to the object (or instance variables as shown here) in the constructor function:

function MyObject(val){
    this.alertVal = function(){
        alert(val);
    }
}

We could then register obj.alertVal directly as "val" is already bound:

obj = new MyObject(8);
register(obj.alertVal);

Douglas Crockford writes about this programming style in Private Members in JavaScript.

Circular references and memory leaks

Whichever method you use you need to be careful about avoiding circular references when registering event handlers (such as onclick) on document objects. For example, if we register an object method as an event handler on an element, such that the method is bound to the object, and the object has a reference back to the element, then we have a circular reference, and a potential leak (in this case a solution would be to have the object store the element's id rather than store a reference to the element object itself.) Here are some articles that discuss ways to cause memory leaks and ways to avoid them:

Memory leak patterns in JavaScript by Abhijeet Bhattacharya and Kiran Shivarama Sundar (IBM developerWorks)
Understanding and Solving Internet Explorer Leak Patterns by Justin Rogers (Microsoft)
JavaScript Closures by Richard Cornford

Hello Dijit Ajax World

2007-11-23T13:43:29-06:00

Getting and deploying Dojo

You have 2 choices here:

1. Download Dojo and serve it up yourself

Download Dojo, unpack the distribution and then serve it up with your web server. If you wanted to use Dojo from a page served up beside the Dojo distribution you could use something like this:

<script type="text/javascript"
src="dojo-release-1.0.0/dojo/dojo.js"></script>

2. Use Dojo from the AOL CDN (Content Delivery Network)

AOL provides Dojo for public use on their Content Delivery Network. With this option you don't have to download Dojo at all (but you're going to need an internet connection of course to test your pages!) You would use Dojo with something like this:

<script type="text/javascript"
src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"></script>

Hello Dijit Ajax World

hi.html

<html>
  <head>
    <title>Hello Dojo AJAX</title>
    <!-- load the Tundra theme from the AOL CDN -->
    <link rel="stylesheet" type="text/css"
      href="http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css">
    <!-- load Dojo from the AOL CDN:
      we set parseOnLoad true in djConfig so that we can
      specify Dijit widgets declaratively with dojotype
      (see the button below) -->
    <script type="text/javascript"
      src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
      djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
      // use the Dojo dependency mechanism to pull in the
      // code for the parser and the Dijit Button
      dojo.require("dojo.parser");
      dojo.require("dijit.form.Button");
      // our button click handler:
      // sends an HTTP GET request to message.php
      // and alerts the response
      function click() {
        dojo.xhrGet({
          url: "message.php",
          handleAs: "text",
          load: function(response){
            alert(response);
          },
          content: {name: dojo.byId("name").value}
        });
      }
    </script>
  </head>

  <!-- use the Tundra theme -->
  <body class="tundra">
    <label for="name">Please enter your name:</label>
    <input type="text" id="name">
    <br>
    <!-- a Dijit button that calls our click() handler -->
    <button dojoType="dijit.form.Button"
    onClick="click()">Hi there</button>
  </body>
</html>

message.php

<?php
header("Content-type: text/plain");
$name = $_GET['name'];
echo "Howdy $name";
?>

Here's the page in action.

Using Dijit widgets

There are 2 strategies for creating Dijit widgets, declarative and programmatic. In the declarative strategy widgets are declared in markup. We put a placeholder element into our document and specify the type of the widget and any parameters or event handlers using HTML attributes. The button widget was created declaratively in hi.html above. It used a dojotype attribute to specify its type, dijit.form.Button, and an onClick attribute to specify an event handler. For another example, here's how we might declare a ProgressBar:

<div dojotype="dijit.ProgressBar" progress="0" maximum="50"></div>

At page load time a parser reads through the document processing elements with dojotype attributes. For widgets, this typically means replacing the element with elements to build the widget. For example, the above ProgressBar placeholder div would be replaced with elements for the bar container, the bar at its current progress width, and a label for the bar. To see a ProgressBar in action have a look at the ProgressBar test page.

In the programmatic strategy we create the widget instance ourselves. We can still use a placeholder element but this time we don't specify the widget type or any other attributes:

<div id="bar"></div>

Then at some point, we can construct a widget in code:

Content-Type: text/plain
var bar = new dijit.ProgressBar({progress: 0, maximum: 50}, "bar");

This call will create the widget and modify the document, replacing the placeholder div with the elements for the widget. When we create widgets programmatically we specify widget properties by passing an object to the widget constructor, rather than with HTML attributes. The use of a placeholder element is optional and we can construct a widget without one. In this case elements are built but they won't be located in the document. You can insert the elements for the widget into the document later by using the widget's domNode property (for example, foo.appendChild(bar.domNode)). Here are some reasons why you might want to use the programmatic strategy:

widget creation is under your control, this is important when developing in an unobtrusive or progressive enhancement manner
it is unnecessary to add attributes to HTML
the parser is not needed (less code to load and less code to run at page load)

Programming with Dojo

Dojo provides a rich set of programming supports, including functions for managing events, DOM querying and manipulation, animations, and JavaScript language utilities. Here's a couple to get you started:

dojo.addOnLoad: registers code to run whenever the page has been loaded
dijit.byId: retrieves the widget object for an element

If we created a widget:

<div id="bar" dojotype="dijit.ProgressBar"></div>

we could access it programmatically, say to change the progress value, with:

Content-Type: text/plain
dijit.byId("bar").update({progress: 10});

AxsJAX

2007-11-14T09:52:31-06:00

We have been building accessibility support into the Dojo JavaScript toolkit to enable developers to create accessible web applications. But what if you are using a web application written in a toolkit without accessibility support or you are not satisfied with the user experience you are getting? You could try injecting new behaviour with AxsJAX -- the new JavaScript framework from Charles Chen and T.V. Raman. AxsJAX can inject accessibility support, such as keyboard behaviour or ARIA roles and states, into web applications at the browser. AxsJAX is open source and up on Google Code. There's an FAQ and other documentation on available injection scripts (Google Reader and Google Search at the time of writing this post.)

Dojo 1.0 is out!

2007-11-05T12:09:09-06:00

Congratulations to the Dojo community! Version 1.0 of the JavaScript toolkit has been released. There's lots of great stuff in this release and Alex has a post up on the Dojo site outlining the new features in 1.0. One of the things that we have really been working at for this release is solid accessibility support:

widgets are usable by keyboard alone, keyboard and mouse used in combination, or mouse alone
widgets use ARIA roles and states to provide semantics for assistive technologies (such as screen readers)
widgets have been designed to work in Windows high-contrast mode

Thank you IBM and Mozilla for supporting Dojo accessibility.

FSOSS 2007 DHTML Accessibility Talk

2007-10-27T14:21:35-05:00

I had a great time this week at the Seneca Free Software & Open Source Symposium (FSOSS). On Friday, David Bolter and I gave a talk on DHTML accessibility. Here are the slides:

(the FSOSS slides are also available in PowerPoint format)

As part of our talk we showed how to build a simple accessible DHTML menu. We started out with a visual, mouse-based menu and added keyboard support, assistive technology support with ARIA, and high-contrast support.

menu1: visual, mouse-based menu
menu2: adding keyboard support
menu3: adding assistive technology support with ARIA
menu4: adding high contrast focus indication
util.js: some utility functions used in the menu

I'd like to thank David Humphrey for inviting us to speak and for doing such a great job organising the symposium.

xUnit Test Patterns @ XPToronto

2007-09-19T19:57:48-05:00

Alistair McKinnell and Jason Cheong-Kee-You gave an excellent talk on xUnit Test Patterns at XPToronto last night. The presentation included a discussion of Gerard Meszaros's test philosophy framework:

Test First or Last?
Tests or Examples?
Test-by-Test or All-At-Once?
Outside-In or Inside-Out?
State or Behavior Verification?
Fixture Design Up Front or Test-by-Test?

For illustration, Alistair and Jason worked through the development of a set of JUnit tests in a session of pair programming. They worked: Test First, Test-by-Test, Inside-Out, Behavior Verification.

Bitstructures

Open Web Podcast

ondemand.js

Example

Usage

Source code

Progressive enhancement and flicker

Firefox 3 released!

Installing Accerciser on Ubuntu 7.10

Ajax Pub Nite #1

Running IE6 and IE7 on the same machine with Virtual PC

Getting, setting, and removing tabindex values with JavaScript

ARIA and jQuery and YUI

ARIA support in Internet Explorer

Functions, closures, and objects: implementing a filter function in Scheme and Java

A function is an object with an "apply" method

A closure is an object with an "apply" method and some state

My Arduino arrived!

Python bound methods

Registering JavaScript object methods as callbacks

Why we don't want to just pass obj.alertVal to register()

Closure with an anonymous function

Build a generic closure maker

Alter the register function to take the object too

Bind the method to the object at construction

Circular references and memory leaks

Hello Dijit Ajax World

Getting and deploying Dojo

1. Download Dojo and serve it up yourself

2. Use Dojo from the AOL CDN (Content Delivery Network)

Hello Dijit Ajax World

hi.html

message.php

Using Dijit widgets

Programming with Dojo

Further reading

AxsJAX

Dojo 1.0 is out!

FSOSS 2007 DHTML Accessibility Talk

xUnit Test Patterns @ XPToronto