Don’t call me DOM

22 January 2009

Microblogging: what for?

Filed under:

So I started microblogging a few days ago, most probably as a result of my co-chairing of the Workshop on the Future of Social Networking – although I can’t really say there was a conscious connection between the two events.

Twitter and friends have been around for quite some time now, and microblogging hadn’t really appealed to me, despite a few experiments here and there; I had started to follow some colleagues and friends tweets by subscribing to the resulting RSS feeds, but hadn’t really found a good motivation to use it to generate content.

20 January 2009

Cumulative Voting with JQuery

Filed under: Uncategorized

W3C has its own system designed to create, answer and gather results from votes, strawpolls, registrations, etc., known as WBS; I have been developing and maintaing this system over the past six years - I'm hoping to find sometimes the time and energy to make that tool open-source, but given that this requires abstracting many of its W3C-isms, I'm not holding my breath.

WBS knows a variety of types of questions that can be included in the questionnaires it creates: open comments, radio-selectable list of choices, checkboxes-selectable list of choices, timetable selector, etc. It is also (more or less weel) designed so that new types of questions can be reasonably easily added.

As part of an upcoming survey for W3C Members, it was requested that WBS handles a new type of questions, to support cumulative voting.

Screenshot of Cumulative Vote in WBS, without Javascript

Adding the server-side part of that new control was relatively straightforward, thanks to WBS architecture; but given the nature of cumulative voting, it seemed more or less required to complete it with a client-side layer (read "Javascript") to ensure a minimum level of usability.

Although I started writing Javascript almost as soon as I started writing Web pages some twelve years ago, I had grown wary of doing it; I restarted coding with it lightly over the past two years, but had found it quite cumbersome to write, in particular when wanting to do it properly, that is to say with graceful degradation, events binding, proper DOM operations, etc.

So I figured that if everyone is raving about these new Javascript frameworks, there may be some reason to it and that I would better pay attention - and thus started using JQuery, mostly because it happened to be already set up on the W3C site and that I hadn't heard or read bad things about it.

Screenshot of Cumulative Vote in WBS, with Javascript layer

Sure enough, one hour and a few tutorial pages later, I had written the 30 lines of code that were needed to support what I had in mind to ease the interactions with the cumulative voting. Quite impressive! Write less, do more seems to be right on target. The usage of CSS selectors to pick the elements on which you want to act is a bliss.

I did have to tweak the code a bit to improve its performance - my initial code didn't scale well when the number of options on which to vote went up; I fixed it up by relying on event delegation, essentially reducing the number of events binding by attaching the onChange event to the container of the select elements rather than to each of them.

For sake of illustration, let's compare the code to the one I would have needed to write without using JQuery (and not mentioning cross-browsers compatibility issues) for the first couple of lines:

window.addEventListener('load',function() {
$(document).ready(function() {
   // Adding a line to the list with the total displayed
divs = document.getElementsByTagName("div");
for(i=0;i<divs.length;i++) {
  div = divs[i];
  if (div.class=='cumulative') {
    cumulativeSelectors = div.getElementsByTagName("ul");
    for (j=0;j<cumulativeSelectors.length;j++) {
      ul = cumulativeSelectors[j];
      if (ul.class=="compare") {
        li = document.createElement("li");
        totalSpan = document.createElement("span");
        totalInput = document.createElement("input");
        remainingSpan = document.createElement("span");
        remainingInput = document.createElement("input");
        totalInput.disabled = remainingInput.disabled = true;
   // Adding a line to the list with the total displayed
   $("div.cumulative").append("<li><span class='label'>Total</span>:
 <input disabled='disabled' /> <span class='label'>
Remaining</span> <input disabled='disabled' /></li>");

(syntax highlighter credits go to Enjoy*Study.)

And that's taking the less complex part of the code…

I think I'm going to like coding in Javascript again! I would be curious to read the XForms equivalent of this widget - any taker?

Possible improvements to my cumulative voting widget include:

  • Packaging it as a JQuery widget - this could possibly be useful to others?
  • Using sliders to give a better visual feedback
  • Annotating the controls with WAI ARIA for improved accessibility and usability


In case it wasn’t clear from the past three entries posted here, I have started to microblog on – the open version of Twitter. I’m still trying to figure out whether I should have my posts also mirrored on twitter, where most of other microbloggers I know are gathered – oh for openmicroblogging in Twitter!

I had started aggregating my microblogs on this blog through feedwordpress, but found the results too noisy – in particular since this blog is syndicated on the W3C Team blogs’ galaxy where the microblogs would end up filling all the entries. I’m still looking into finding a good way to show my microblogs on this site, though; for the time being, they are a link away.

Older entries »

Picture of Dominique Hazael-MassieuxDominique Hazaël-Massieux ( is part of the World Wide Web Consortium (W3C) Staff; his interests cover a number of Web technologies, as well as the usage of open source software in a distributed work environment.