delete.me.uk

Mozilla's Context Menus

2006-10-31T07:00:00.000Z

Mozilla's Context Menus

Several years back I followed Mozilla's (the product now known as SeaMonkey) progress pretty closely and one person who's blog I followed was Matthew Thomas, or as everyone seems to know him, MPT. The guy pushed usuability and user interface design on bugzilla and God knows Mozilla needed it, the interface was quite simply horrible.

I wasn't directly involved in any Mozilla development, past the odd bug report, so my perspective is very much as an outsider, but I gather that as Mozilla was open sourced most of the developers were those on the payroll of Netscape (which was now a division of AOL Time Warner). The idea of open sourcing a project and instantly attracting developers who sacrafice their free time is flawed, however MPT was a guy who wasn't employed by Netscape but devoted time to helping with usability and triaging in bugzilla.

Mozilla was an open source project but the original goal of the project was to drive the Netscape browser. With all the contributors to Mozilla being employees of Netscape several desicions that went into the codebase, and notably the UI, were driven by Netscape without heedence of the community.

One example of this, which has always stuck in my mind, is the context menus. I'm not entirely sure of the story behind the context menus but bug 75338 follows MPT's spec and related discussion. After an extended period of time and several iterations a pretty darn beautifull context menu specification is created (complete with classic mozilla.org banner) which is miles more elegant than the context menus which existed in Mozilla at the time. I find these context menus amazingly well thought out and designed and I still think this spec is really something.

This story doesn't have a happy ending, ultimately a Netscape engineer created a massively inferior spec which didn't change the menus too much (they still had the oh-so-useful "Set as Wallpaper" option) so the diehard faithful users wouldn't get too confused (what users?). The Netscape spec was implemented and MPT got fed up of being ignored and jumped ship.

The reason I am posting this is because I don't want to lose the link to MPT's context menu specification. It made a real impression on me and I can only hope that when I come to create a UI it is as well planned and designed as this.

rbNarcissus v0.2

2006-04-26T23:18:00.000+01:00

rbNarcissus v0.2

I updated rbNarcissus to a second version with a lot of jiggling so that it actually works when parsing anything that I tried to throw at it now. I also stuck up an example script which shows how you can extract information by walking the parse tree.

Running the Ruby parser over the Narcissus parser takes a second or two, so I don't think it's stunning performance wise. Next I'd really love to have the time to look at creating a run time. I'd also like to know enough Ruby to make it a module, but the reference seemed rather brief on the topic so I didn't really know where to run.

Scope of Variables in JavaScript

2006-04-19T00:51:00.000+01:00

Scope of Variables in JavaScript

A little piece of JavaScript trivia; the scope of JavaScript variables is decided at parse time, not at run time, just like named functions. An example:

function () {
 foo = 'bar';
 var foo
}

The scope of the variable foo is the function body, even though the variable is declared in the statement after an assigment to the variable. It works in my the same way that this runs without error:

function () {
 var bar = foo();
 function foo () {
  return 'baz';
 }
}

Even though the function foo is not defined in the code until after it is called, the parser picks up the name of the function so that the run time knows what to do.

Variable Names vs. Argument Names in Spidermonkey

2006-04-14T01:57:00.000+01:00

Variable Names vs. Argument Names in Spidermonkey

Spidermonkey, the JavaScript engine at the heart of Firefox and other Gecko browsers, treats variables declared inline and those declared in the argument list differently. I noticed this quirk a little while ago, and stumbled upon it again recently. To demonstrate, first an example.

function foo (arg1) {
 alert(arguments[0]);
 arg1 = 'bar';
 alert(arguments[0]);
}

foo('test');

In this example the first alert box says 'test', however the second alert box says 'bar'. This might not be what you expect and certainly isn't what I expected. The variable arg1 is not just a reference to the object that was passed in. Using the assigment operator doesn't just change the reference contained in the variable arg1 to point to another object, it also changes the arguments array.

What I expected to happen, and what happens in other browsers would be more like this:

function foo () {
 var arg1 = arguments[0];
 alert(arguments[0]);
 arg1 = 'bar';
 alert(arguments[0]);
}

foo('test');

With both the first and second alert boxes reading 'test' and the variable simply being a reference, independant of the reference in the arguments array.

Odd.

innerHTML using a Pythonesque Template Object

2006-04-10T14:13:00.000+01:00

innerHTML using a Pythonesque Template Object

There are becoming some increasingly prettier ways to hide away the verbosity of using the W3C's DOM to create anything more complicated than a single element, for example Vivabit's DOM Builder. The other option, generously donated by Microsoft, is to just throw a HTML string at the innerHTML attribute of any Element object.

As part of its standard library Python provides a Template class contained in the string module. This class makes it easy to construct templates which can be used over for several substitution operations, or just one. Recently I've been using a JavaScript implementation to generate HTML strings for use with innerHTML, letting me avoid the DOM.

The object definition is given below. It processes the string in the constructor, providing improved performance for multiple substitutions.

function Template (template) {
 this.template = template;

 var idpattern = new RegExp("^({(" + this.idpattern + ")})|(" + this.idpattern + ")");
 var parts = [];
 
 var i = 0, j = 0;
 while ((j = this.template.indexOf(this.delimiter, i)) != -1) {
  if (i != j) { parts.push(this.template.substring(i, j++)); }

  // check for an escaped delimiter, doubled up
  if (this.template.charAt(j) == this.delimiter) {
   if (typeof parts[parts.length - 1] == "string") {
    parts[parts.length - 1] += this.delimiter;
   } else {
    parts.push(this.delimiter);
   }
   i = ++j; continue;
  }

  var result = this.template.substring(j).match(idpattern);
  if (result == null) { throw new Error("Invalid placeholder in string: index " + i); }
  
  var key = result[2] || result[3];
  parts.push(key.split("."));
  i = j + (result[1] ? result[1].length : key.length);
 }
 if (i != this.template.length) { parts.push(this.template.substring(i)); }

 this._compiled = parts;
}

Template.prototype.delimiter = "$";
Template.prototype.idpattern = "[_A-z][._A-z0-9]*";

Template.prototype.substitute = function (keys) {
 var str = "";

 var i = 0, part;
 while (part = this._compiled[i++]) {
  if (typeof part == "string") { str += part; }
  else {
   for (var j = 0, value = keys; j < part.length; j++) {
    value = value[part[j]];
   }
   str += value;
  }
 }

 return str;
}

This object is great to use with a response from one of Yahoo's API calls, formatting the JSON object. An example implementation of the showUrls from my previous post would like this:

function showUrls (result) {
 
 var link = new Template('\
  <p><a href="$ClickUrl" target="blank">$Title</a><br>\
    <span style="color: gray;">$Note</span>'
 );
 
 var links = "<div>";
 var results = result.ResultSet.Result, i = 0, url;
 while (url = results[i++]) { links += link.substitute(url); }
 links += "</div>";
 
 $("url_container").innerHTML = links;
}

One thing to be careful about here however is escaping the HTML and attributes correctly. This is a poor man's E4X.

I really need to get around to setting up a code repository so that it's easier for me to maintain my snippets online, rather than just posting them to my blog and letting them stale.

Source Code Highlighting from the Clipboard on OS X

2006-04-06T19:05:00.000+01:00

Source Code Highlighting from the Clipboard on OS X

So it doesn't get lost here is a command you can use to highlight source code on OS X:

$ pbpaste | \
  tr '\r' '\n' | \
  source-highlight --no-doc --css foo.css --src-lang js | \
  pbcopy

First, pbpaste pastes the contents of the clipboard (or pasteboard in Mac lingo) onto standard out. We then pipe it to tr which is a simple substitution command to replace the Mac line breaks with UNIX line breaks that source-highlight, a GNU program, understands. This is then piped through to source-highlight, with options to format using CSS and a flag specifying the language (the CSS file name can be anything, it makes no difference with the --no-doc flag). Finally it's piped to pbcopy which sticks it back onto the clipboard. Easy!

I had to install source-highlight from source, the version on Fink was too old and didn't have the JS language definition (and what good is it without JavaScript!). The only dependancy is the Boost C++ RegExp library. This isn't too hard to install; first you have to download the bjam binary, a make tool, and use it to compile and install the Boost libraries.

Lo and behold, highlighted source code.

Yahoo! APIs

2006-04-06T18:29:00.000+01:00

Yahoo! APIs

Yahoo! have recently been populating their developer page with an impressive array of APIs for folks to access the raw data from their various services, as well as their recent acquisitions. The services are super easy to use too.

When Google first announced their SOAP API to their search engine, while the data was there to be had, there was a large barrier to getting to it. Yahoo's APIs can all be accessed using REST, which means simple GET and POST requests and as well as offering language neutral XML they also offer JSON and PHP formatted results. For a Web developer constrained to a Web browser it doesn't get better than this, the APIs can be queried accross domains.

Below is a simple object that I've been using to fire off requests to the Yahoo APIs.

var yApi = {
 IMAGE: "http://api.search.yahoo.com/ImageSearchService/V1/imageSearch",
 RELATED: "http://api.search.yahoo.com/WebSearchService/V1/relatedSuggestion",
 MYWEB_URL: "http://api.search.yahoo.com/MyWebService/V1/urlSearch",
 MYWEB_TAG: "http://api.search.yahoo.com/MyWebService/V1/tagSearch",

 defaults: {
  appid: "idontsmoke"
 },
 
 get: function (url, parameters) {
  
  // add in the defaults
  for (var key in this.defaults) {
   if (parameters[key] == undefined) {
    parameters[key] = this.defaults[key];
   }
  }
  url = this.encode_url(url, parameters);
  
  var script = document.createElement("script");
  script.src = url;
  script.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(script);
 },
 
 encode_url: function (url, parameters) {
  components = [];
  for (var key in parameters) {
   values = parameters[key];
   if (typeof parameters[key] != "array") { values = [values]; }
   for (var i = 0, len = values.length; i < len; i++) {
    components.push(
     encodeURIComponent(key) + "=" +
     encodeURIComponent(values[i]));
   }
  }
  return url + "?" + components.join("&");
 }

}

Which can then be called using something like:

yApi.get(yApi.MYWEB_TAG, {
 yahooid:  "ashleysowden",
 tag:      ["javascript", "awesome"],
 output:   "json",
 callback: "showUrls"
});

The only problem is I can't get the damn thing to respond with a list constrained to my Yahoo ID and the support channels for the APIs seem questionable at best.

JsBot, Jot and another Year

2005-12-22T22:55:00.000Z

JsBot, Jot and another Year

So another year is coming to a close, and this one was pretty. This summer saw me interning at JotSpot, the premier Wiki company. I got the opportunity to work out in San Francisco, California alongside some DHTML guys I've pseudo-known for 5 years; Alex and Dave "Schnotz". I also got the chance to meet some other cool people and drink lots of tequila, notably at the Renkoo launch party.

While at Jot I had the chance to work on the Dojo JavaScript toolkit, and helped to push its first release out of the door. I ended up pouring hours and hours into it and my biggest contribution was the Jot sponsored RichText component which attempts to wrap up the WYSIWYG editing capabilities of the browsers in a lightweight way, without trying to push them where they don't want to go. A horrible and thankless job, but what I feel turned out to be a rather reasonable output. I also think its best moment is yet to come, we'll have to wait and see where.

More recently I've wrapped up PircBot so as to allow IRC bots written in JavaScript, a fantastically flexible scripting language, dubbed JsBot. It's another small project that I unfortuantly don't have the time to take anywhere as my final year at university sucks up all my time.

Moving onto next year, I finally pop out of my formal education and into the job market, we'll have to wait and see where that does take me.

rbnarcissus

2005-08-05T05:12:00.000+01:00

rbNarcissus - JavaScript parsing in Ruby

So this weekend gone I decided it was about time for me to turn back to the server for a little action, having spent my life on the client for as long as I can remember now. I thought maybe I'd throw together a bit of PHP and revel in the luxery of a foreach statement. But I'm young and trendy, I script in Python, I've known JavaScript since DHTML was teh sux0r. Joyce mocked my plans for some PHP loving, and suggested all the cool kids use Ruby, and Ruby on Rails. She then proceeded to ridicule me, and I caved; I'm not strong.

So for the past couple of days I devoted my long long commute, sitting on the public transport system of San Francisco Bay Area, to learning a little Ruby and working on a script that lets me stay in reach of the familier and friendly world of JavaScript, a JavaScript parser. The result, a port of the Mozilla Foundation's Narcissus JavaScript parser written in Ruby: rbNarcissus.

Currently only a parser with nary an interpreter in sight it has questionable use. It's also my first Ruby script and so probably doesn't follow the conventions amazingly well; I've still very much got my JavaScript hat on, waving the flag and singing the anthem (and plugging Dojo).

e4x

2005-04-16T19:19:00.000+01:00

ECMAScript for XML (E4X): Debunking an example

I'd never heard of E4X (ECMAScript for XML), an extension to ECMAScript (JavaScript) specifically for handling data encumbered by XML, before today. It was developed several years ago, has been adopted by Ecma and published in June 2004, and is apparently now implemented in Mozilla's products.

The article I stumbled across is titled Native XML Scripting in BEA WebLogic Workshop and offers an argument for the extension over using the standard JavaScript DOM bindings.

Looking at the example scripts the article presents it's clear the E4X notation is much cleaner and easier to work with; the DOM oriented function is horrible and full of tree maneuvering (why didn't they use a TreeWalker then?). Below is the short and sweet E4X function which completes the job outlined in the article.

// the E4X function
function toHTML (srcDoc) {
    var destDoc = <html/>;

    for (var atom in srcDoc..ATOM) {
        var ptext = "";
        for(var item in atom.children()) {
            ptext += item + "\n";
        }
        destDoc[destDoc.length] = <P>{ptext}</P>;
    }
    return destDoc;
}

The same job can apparently be accomplished using the function below, this time using DOM API calls to crawl the trees and create a document.

// the original DOM function
public Document toHTML(Document srcDoc) throws Exception {
    Document destDoc = srcDoc.getImplementation().createDocument("","HTML",null);
    Node root = destDoc.getFirstChild();

    Node node = srcDoc.getFirstChild().getFirstChild();

    while (node != null) {
        if (node.getNodeName().equals("ATOM")) {
            Node pNode = destDoc.createElement("P");
            root.appendChild(pNode);

            Node tempNode = node.getFirstChild();
            while (tempNode != null) {
                if (tempNode.getNodeType() == Node.ELEMENT_NODE) {
                    Node n = tempNode.getFirstChild();
                    while (n != null) {
                        if (n.getNodeType() == Node.TEXT_NODE) {
                            Node tValue = destDoc.createTextNode(n.getNodeValue() + "\n");
                            pNode.appendChild(tValue);
                        }

                        n = n.getNextSibling();
                    }
                }

                tempNode = tempNode.getNextSibling();
            }
        }

        node = node.getNextSibling();
    }

    return destDoc;
 }

This code isn't JavaScript 1.5 (ECMAScript 3) and from the looks of it it's Java. Right away, this isn't comparing like with like, Java is much more verbose. Next the author has this to say about the example:

[T]he logic of the program is almost completely overwhelmed and obscured by tree navigation logic and DOM API calls. Consequently, creating, reading, and maintaining the code is tedious, time consuming and error prone. In addition, the DOM requires the programmer to learn and adopt a tree-based object model and a relatively extensive API for performing operations on this object model.

This is just plain unfair! The DOM example is very poorly written. Rewriting the function, using JavaScript so as to align the goal posts, I came out with this:

// my re-written DOM function
function toHtml(srcDoc) {
    var destDoc = srcDoc.implementation.createDocument(null,"html",null);

    var atoms = srcDoc.getElementsByTagName("ATOM"), atom;
    for (var i = 0; (atom = atoms[i]); i++) {
        var p = destDoc.createElement("p");
        destDoc.documentElement.appendChild(p);
    
        for (var j = 0, item; (item = atom.childNodes[j]); j++) {
            if (item.nodeType == Node.ELEMENT_NODE)
                p.textContent += item.textContent + "\n";
        }
    }
    return destDoc;
}

Now this is almost the same as the E4X example. It only requires a tiny bit more work to mould it into a form using only the fragments of the DOM current browsers support. The function is only 3 lines longer and to someone who knows the syntax for both languages, equally as readable. The biggest advantage the DOM code holds, however, is that it will probably also be familiar to those who have used the DOM in other languages (say, Java!).

The E4X example also appears to use an abbreviated version of the for statement which allows iteration of an array with unpacking of each element in the statement (à la Python). If we were able to use this then my function would look like this:

function toHtml(srcDoc) {
    var destDoc = srcDoc.implementation.createDocument(null,"html",null);

    for (var atom in srcDoc.getElementsByTagName("ATOM")) {
        var p = destDoc.createElement("p");
        destDoc.documentElement.appendChild(p);
    
        for (var item in atom.childNodes) {
            if (item.nodeType == Node.ELEMENT_NODE)
                p.textContent += item.textContent + "\n";
        }
    }
    return destDoc;
}

So in terms of real difference, this function is really not any from that written using E4X. The harshly worded statement in the article is founded on false claims and really just serves to stengthen the case for the author's baby.

I'm not judging E4X here, this is a very simplistic use case, and I don't know much about the syntax, but to argue for it's adoption by producing a shoddy example for the opposition is not really fair. The DOM is not beautiful but neither is it ugly—at least give credit where credit is due.

iso8601

2005-03-26T19:40:00.000Z

Parsing W3C's ISO 8601 Date/Times in JavaScript

Many standards all over the place use the W3C's subset of the ISO 8601 standard to specify a date and time unambiguously. After a very brief search I couldn't find a simple JavaScript function to parse a string in this form, so here's one I wrote for the job. It should be bullet-proof and accept any correctly formatted date/time in the correct style.

Date.prototype.setISO8601 = function (string) {
    var regexp = "([0-9]{4})(-([0-9]{2})(-([0-9]{2})" +
        "(T([0-9]{2}):([0-9]{2})(:([0-9]{2})(\.([0-9]+))?)?" +
        "(Z|(([-+])([0-9]{2}):([0-9]{2})))?)?)?)?";
    var d = string.match(new RegExp(regexp));

    var offset = 0;
    var date = new Date(d[1], 0, 1);

    if (d[3]) { date.setMonth(d[3] - 1); }
    if (d[5]) { date.setDate(d[5]); }
    if (d[7]) { date.setHours(d[7]); }
    if (d[8]) { date.setMinutes(d[8]); }
    if (d[10]) { date.setSeconds(d[10]); }
    if (d[12]) { date.setMilliseconds(Number("0." + d[12]) * 1000); }
    if (d[14]) {
        offset = (Number(d[16]) * 60) + Number(d[17]);
        offset *= ((d[15] == '-') ? 1 : -1);
    }

    offset -= date.getTimezoneOffset();
    time = (Number(date) + (offset * 60 * 1000));
    this.setTime(Number(time));
}

To use it you'll first have to create a Date object and then invoke the method. The usage mirrors the setTime method provided by the standard JavaScript Date object.

var date = new Date();
date.setISO8601("2005-03-26T19:51:34Z");

Simple. I guess this would fit nicely into a "standard hack" catagory, if there were such a thing.

Update: Having just tripped onto BST I noticed the timezones weren't coming out correctly so I've fixed up the function and it should be right now. Working with timeshifts when your system is set to UTC can make it all too easy to miss something.

While I was at it I needed to go back again so here is the reverse function, toISO8601String.

Date.prototype.toISO8601String = function (format, offset) {
    /* accepted values for the format [1-6]:
     1 Year:
       YYYY (eg 1997)
     2 Year and month:
       YYYY-MM (eg 1997-07)
     3 Complete date:
       YYYY-MM-DD (eg 1997-07-16)
     4 Complete date plus hours and minutes:
       YYYY-MM-DDThh:mmTZD (eg 1997-07-16T19:20+01:00)
     5 Complete date plus hours, minutes and seconds:
       YYYY-MM-DDThh:mm:ssTZD (eg 1997-07-16T19:20:30+01:00)
     6 Complete date plus hours, minutes, seconds and a decimal
       fraction of a second
       YYYY-MM-DDThh:mm:ss.sTZD (eg 1997-07-16T19:20:30.45+01:00)
    */
    if (!format) { var format = 6; }
    if (!offset) {
        var offset = 'Z';
        var date = this;
    } else {
        var d = offset.match(/([-+])([0-9]{2}):([0-9]{2})/);
        var offsetnum = (Number(d[2]) * 60) + Number(d[3]);
        offsetnum *= ((d[1] == '-') ? -1 : 1);
        var date = new Date(Number(Number(this) + (offsetnum * 60000)));
    }

    var zeropad = function (num) { return ((num < 10) ? '0' : '') + num; }

    var str = "";
    str += date.getUTCFullYear();
    if (format > 1) { str += "-" + zeropad(date.getUTCMonth() + 1); }
    if (format > 2) { str += "-" + zeropad(date.getUTCDate()); }
    if (format > 3) {
        str += "T" + zeropad(date.getUTCHours()) +
               ":" + zeropad(date.getUTCMinutes());
    }
    if (format > 5) {
        var secs = Number(date.getUTCSeconds() + "." +
                   ((date.getUTCMilliseconds() < 100) ? '0' : '') +
                   zeropad(date.getUTCMilliseconds()));
        str += ":" + zeropad(secs);
    } else if (format > 4) { str += ":" + zeropad(date.getUTCSeconds()); }

    if (format > 3) { str += offset; }
    return str;
}

This function takes two arguments, both optional. The first describes the format the resulting string should take, ie. how many components to include. This is an integer between 1 and 6, with the meanings listed above in the comment block. The second argument is an optional timezone offset. If it is not specified the timezone is set to UTC using the Z character. It takes the form +HH:MM or -HH:MM.

xbox

2005-03-14T15:11:00.000Z

Microsoft Gen '05 at Southampton

Last Wednesday the Microsoft propaganda machine descended upon our campus at the University of Southampton to pimp their latest products to us. As part of their Academic Alliance they're pretty keen on getting us using everything Microsoft. The event was dubbed "Gen'05" although I'm not entirely sure what that's meant to mean. The banners read "creation generation events" which I guess is trying to be snazzy and cool. Inside there were a couple of stands showcasing the latest and greatest from everyone's favourite software company.

I found it a little interesting, although probably not in the way Microsoft was intending. There seemed to be a focus on moving away from the PC, with Xboxen set up, some media centre thing and some portable devices running Windows Embedded (or what have you) among a few other stands. All the products were running on no-name hardware, it didn't look like Microsoft had a single big or reputable named supporter for any of it's "visions". We didn't stay very long and only really had a little play with the handheld PCs; the handwriting recognition was absolutely atrocious. All in all I wasn't overly impressed but neither was I surprised, I don't really expect much from Microsoft.

Just before we left we had a quick chat with one of the recruiters who told us they were looking for marketing, sales and technical people, so we should be in with a chance! Lucky us. I can't say that the event or the marketing behind it has inspired me to work at Microsoft at all, so unfortuantly they're going to have to join the queue at the back. Sorry Microsoft!

Anyway, the only reason we went in to the event at all was to pick up one the free T-shirts they were handing out. We were told we would get one if we handed in a quick questionnaire on our way out, having looked around. So, we went in and walked around as we were told and handed over our details in exchange for our "reserved 4 gr8ness" t-shirts (very nice, don't you think?). Apparently handing over our details also entered us to a competition to win an Xbox. This morning, lo and behold, I got a call from Microsoft and it turns out I won the Xbox. yay me! These past couple of weeks are turning out to be pretty good and I'll soon be the owner of one ugly (but much appreciated) console.

validation

2005-02-12T14:37:00.000Z

HTML Validation

Over a week ago now PPK wrote an article for A List Apart magazine entitled JavaScript Triggers in which he described a method of providing additional information for a scripting layer to use. Basically, this information is whacked into attributes on your standard HTML elements and become the triggers. There is a warning included at the top of his article indicating that the subject may be controversial, as I can tell A List Apart has built itself around some pretty pedantic people :-). Alongside PPK's article was another, entitled Validating a Custom DTD from J. David Eisenberg. It almost seemed to be hinting at saving grace on the part of ALA; we did a bad but looky here.

Was PPK right?

A few days after the article was published PPK wrote an entry in his blog to wrap up the feedback he got on the subject of validation. There were a couple of points raised, some valid, some moot. In my opinion the correct solution is namespacing in the world of XML, however this is not a real world solution, the 10lb gorilla doesn't support it so it isn't going to stick. The solution that seemed to hold the most weight is the use of custom DTDs, these make your document validate and it works, best of both worlds! Well, actually, not.

Conformance with the HTML specification

Most people's gold standard of validation is either the W3C's validator or one of the other similar online services. It gives you a nice, official looking report with a clear message at the top of the document which tells you whether you got it right or wrong. All these validators sit atop of a newer version of James Clark's SP, pretty much the defacto validating SGML parser. The fact that no one in the real world uses this parser almost makes them and the issue of validation entirely academic, but I'll come onto this later. My point right now is that these only check a document against it's DTD to ensure validity.

The HTML specification says:

Each markup language defined in SGML is called an SGML application. An SGML application is generally characterized by:

An SGML declaration. The SGML declaration specifies which characters and delimiters may appear in the application.
A document type definition (DTD). The DTD defines the syntax of markup constructs. The DTD may include additional definitions such as character entity references.
A specification that describes the semantics to be ascribed to the markup. This specification also imposes syntax restrictions that cannot be expressed within the DTD.
Document instances containing data (content) and markup. Each instance contains a reference to the DTD to be used to interpret it.

The first two requirements are checked by the validator, however the third isn't. This third point is where strict conformance dies and your document essentially ceases to be an HTML document.

The HTML specification includes a few appendices including notes on invalid documents which outline what happens if your document isn't valid. It recommends (to UAs, not authors) that if a user agent encounters an attribute it does not recognize, it should ignore the entire attribute specification (i.e., the attribute and its value). This bodes well for our use case, however in a note to authors, directly underneath, it also states that since user agents may vary in how they handle error conditions, authors and users must not rely on specific error recovery behavior (where the definition of must not is given by RFC 2119 and means absolute prohibition, which is pretty final). So this method is definite no-no according to the specification.

The same section also says that for reasons of interoperability, authors must not "extend" HTML through the available SGML mechanisms (e.g., extending the DTD, adding a new set of entity definitions, etc.). Again, this pretty clearly and cleanly cuts out J. David Eisenberg's method. If you do use his method to force SGML validity you sacrifice your status as an HTML document.

Is validation moot?

With all this heartache to fight for strict conformance to the HTML specification, is it worth it? The other day I noticed Nate mention that validation is a tool, not a label. I'm not entirely sure what that means, but I think the general meme is that if your document is parsed correctly in the major browsers, the final hurdle kind of becomes moot, it's just not worth the effort.

From my standpoint I see the that purpose of strict validation is that all documents will become universally easy to parse and UAs can simply use drop in parsers. It's the dream. At the moment we have to put a fantastic amount of work into producing a really good parser that is up to the task of tackling the Web. This is not a good place to be. However, most people will tell you that this is only a dream, it's not going to happen. The mindshare you would have to win to get there is awesome (not like the hotdogs). In my opinion the best we can do is to ensure content we produce is known good and accept the rest of the world just isn't going to get there.

proxyicon

2005-01-26T02:59:00.000Z

A Proxy File Widget

I seem to be becoming rather opinionated and very critical of my user interfaces. I'm not sure whether this is a good or a bad thing. The more opinionated I get about a subject the more I seek information with a slant and I tend to close my mind somewhat, which has got to be bad, although there's nothing like the ramblings of zealot to set me back on the straight. My experience with HCI is a little limited, I only know what I've read on the Internet so I may be way out with some of my assumptions. Taking that onboard; I've been playing around with a proxy file widget.

Both Gnome's HIG and OS X's HIG recommend using an SDI, where there is a one-to-one mapping between documents and windows. This enforces the desktop metaphor, the window effectively is the document. Document windows in OS X have a small proxy icon in the title bar which allows you to directly manipulate the document via drag and drop and also view the document's path and open any folder along the way. The applications in Gnome use a variety of interfaces; one which uses the SDI well is Eye of Gnome, the image viewer. My biggest frustration with Gnome's SDI however, is that the metaphor stops there, the document is shown in the window, but there is no way of manipulating the document, hell, you can't even tell which document you're looking at once it's open. This is really an aside though, venting a frustration, I wanted to draw attention to OS X's proxy icons. Below is a screen capture with the path pop-up menu.

Nautilus, Gnome's file manager, contains a widget which provides the same functionality as the path pop-up menu that the proxy icon provides in OS X, allowing the user to jump up the folder hierarchy. It lives in the bottom left hand corner of every window and allows easy navigation up the filesystem. I don't think it's as good as OS X's—the icons aren't present and the top level is printed as the forward slash character (urgh). The biggest difference between the two is that OS X's is top-down with the folder is at the top of the hierarchy, whereas Nautilus's is bottom-up, we're at the bottom of the hierarchy. I suspect that these designs came about partly from the position of the menu, being on the top of the window in OS X and the bottom in Gnome, causing both menus to pop-up over the current window. That aside, I think I prefer OS X's top-down view, giving the document the most importance as the current focus.

OS X appears to strive to hide the semantics of paths. That is, I can't think of anywhere where a path is printed in the form /path/to/somewhere. If you didn't know beforehand, then from in everyday use you probably wouldn't be able to discern that the path separator was a forward slash "/". (Update: The Finder info window displays the path using a colon ":" as the separator, which previous Mac OS's used). When the path in to a file is displayed in Finder arrow graphics are used to represent the path and each folder has a proxy icon. I think this is a Good Thing. Gnome's HIG has a section which recommends providing direct manipulation and OS X's HIG infers this with its entire section on drag and drop (compared to the tiny section in Gnome's HIG mentioning drag and drop, which is pale in comparison). The proxy icons are a fantastic way of doing this, the icon is (at least an intermediate to) the document and allows direct manipulation.

All of that was a rather long winded way of saying that I've been toying with the idea of a little proxy file widget using PyGTK. The idea would be to use this instead of the normal /path/to/whereever/ text. I've made a little prototype which is shown below. Currently the code just shows the pop-up, the file is made up. Unlike the widget in Nautilus it's not a button as it's meant to actually represent the file. I'm not sure whether it's taking it too far by adding drag and drop or just to leave it popping up the path menu when clicked. One solution around this wouldd be to use a modifier key or the right mouse button for one or the other, but one thing I've learnt is that this is a complete cop-out solution—hiding functionality in a non-obvious way (which context menus actively encourage).

As I said at the beginning of this rant, I'm not very experienced at HCI design, I have no formal education in the subject, and while my widget may look pretty it could very well be crap from a HCI perspective.

wiki

2005-01-06T21:01:00.000Z

WYSIWYG Wiki Markup → the WWW

If your Web browser had a previous knowledge of a wiki dialogue, which is entirely possible, they're not complex (by design), and was able to ascertain the POST URL to modify the wiki page by scanning the page for an edit link and taking a peek, then it is feasible that you should be able to modify the page inline and simply POST it off to the server without ever having to know about the markup.

Bam. Full circle. Well, almost; PUT will have been shunned in favour of POST, which all Web browsers actually contain support for. Odd, indeed.

excessivetabs

2005-01-05T02:07:00.000Z

Tabs, Tabs Everywhere

Worst. Widget. Ever.

fuzzytimepy

2004-12-29T16:29:00.000Z

Fuzzy Time Python Function

Here is the Python function I've been using to fuzzy up time estimates, loosely inspired from the fuzzying function used in Camino.

def time(seconds):
    # check for seconds first
    if seconds < 60:
        if seconds < 13:
            if seconds < 7: seconds = 5
            else: seconds = 10
            return "under %d seconds" % seconds
        return "under a minute"

    # seconds becomes minutes and we keep checking
    minutes = seconds/60.0
    if minutes < 55:
        if minutes < 2: return "about a minute"
        return "about %d minutes" % minutes

    # this will never seemingly never end. now seconds become hours
    hours = minutes/60.0
    if hours < 48:
        if hours < 1.08: return "about an hour"
        elif hours < 1.92: return "over an hour"
        elif hours % 1 < 0.08 or hours % 1 > 0.92:
            if hours % 1 > 0.92: hours += 1
            return "about %d hours" % hours
        else: return "over %d hours" % hours

    # and the beat goes on, hours turn to days
    return "over %d days" % (hours / 24)

On a related note (and a shameless attempt to register both words with Google), when searching it still differentiates between the British spelling, humanise, and the American spelling, humanize. Not sure why you'd want to not get the results from both spellings, unless maybe you were looking for an entirely British opinion on the subject.

fuzzytime

2004-12-28T02:20:00.000Z

Humanising Date/times: Fuzzy Time

I first noticed this trend in Mac OS X's progress windows which would give "fuzzy" time estimates until completion, that is time esitmates of the form "about an hour" or "under a minute". My assertions are based only on assumptions, but I see this as good for two reasons. Firstly the time is usually only a fickle estimate with many variables so to give an estimate accurate to the second is misleading. Secondly the time is more human, that is your average human doesn't need to distinguish between, say, 58 minutes until completion and 56 minutes, or 1 minute, 15 seconds and 1 minutes, 11 seconds.

Mac OS X will also give some date/times as relative to the present. That is, if the file was modified yesterday or today the date string will say yesterday or today instead of explicitly listing the day of the month as usual. Again, an assumption I'm making is that date/times are easier for a human to understand if there is some context, the context here being current time and also that small differences in time are usually moot. The only case I can think of off the top of my head where you would need an exact explicit date/time is if you are making a direct comparison with something, maybe another file or a record somewhere.

This trend of using fuzzy and relative date/times seems to be a Good Thing, and it has been completely embraced by the Gnome desktop. (Although I can't see it explicitly stated in their HIG it is implied in the pictures, for time-remaining progress indicators for example, and it is also demonstrated in some applications, notably Nautilus.)

This fuzzy formatting of date/times is also visible in the weblog community. The new thing that I noticed introduced here is demonstrated by Dunstan Orchard of 1976design fame of fuzzying relative to the time of day, introducing phrases like "early morning" and "late evening". This practice again humanises the times as (from my experience) we tend to think of time relative to the things we do or remember, which I would guess includes the environment. So a general timeframe of "late evening" means just as much at a glance as 22:11, but saves us the bother of having to think about it in terms of the time of day.

One project that seems to be experimenting with relative times somewhat is Beagle. In some of the screencaps you can see times like "4 days ago", which generally I think I'd find more human than a day of the month. I'm sure I've seen more screenshots posted on p.g.o but they seem to have escaped me (on a side note, a p.g.o search engine would be really useful).

I'm curious as to how far this can be extrapolated. Things like times which a minute ago read "today" now all read "yesterday" depending on which side of midnight you are on. For fuzzy times to work, the computer will have to think in fuzzy times, or times that are meaningful to the user. Also, how far can you extrapolate relative dates. Will including key dates help? If a file is marked as being last modified "Christmas Day" or "On Your Birthday", would this help the user to understand with less effort than simply saying "December, 25" or (in my case) "November, 17".

On a related note I noticed a great suggestion, which seems pretty obvious in hindsight, made by Steven Garrity that IM clients should display local time for the recipient. A simple but excellent idea.

avalanche0.1

2004-12-27T02:42:00.000Z

Avalanche 0.1: A BitTorrent Downloader for Gnome

In an almost unheard of flurry of activity I've posted another piece of Python I've spent some time on; Avalanche , A BitTorrent Downloader for Gnome.

Many people complain about the cryptic names of software and in particular Open Source software is a pretty bad offender, however, when all the obvious names are taken what else are we to do? What I did was search in a thesaurus which produced a word which can be associated with "torrent" but still has seemingly little correlation to the function of the program.

The thing I've tried to get with this application is absolute compliance with the Gnome HIG along with some (hopefully) well placed information to produce a nice intuitive interface which provides everything you should need to monitor a download. Sounds a little like idealistic bullshit, but there you go. I think the interface has come out fairly well. I have been trying to outdo the already good gnome-bt and a there's a couple of areas I think mine does better in.

Everything you should would want in a glance (based on a use case involving only me, admittidly) is provided in the main window. Everything else is provided in a second informational window. The advantage of this is that all the information can be seen at once and only pertinent information is displayed by default. This is the biggest thing that irks me about tabs, and why I think Apple's Finder Info window is vastly superior to Nautilus's Tabbed Info window.

I'm throwing this out into the world off the back of the open source cornerstone release early, release often and hence this release has been dubbed "release early, release often". Theoretically this allows users to try it out and get hooked while I continue with development, although I'm not expecting much. While this release is "early", I'm not going to have much time in the immediate future to follow through and release often, so don't expect much for the moment.

btpropertypage

2004-12-22T23:53:00.000Z

BitTorrent Property Page for Nautilus

Hello, does anyone still read this? I'm a really terrible "blogger", but hey.

While I should be busy doing my third year project and revising for my exams coming up in January I've been playing around with GTK programming, BitTorrent and Python. I've made a little script to show the information contained in BitTorrent 'metainfo' files as a Property Page tab in Nautilus. You can grab it over at idontsmoke.

This was actually only a side track, I've been playing around with the idea of making a client, which sort of works, isn't finished and may never be. I'm slowly getting the hang of GTK, that's the part I spent the most time wrestling with to get this Property Page working. After having used Cocoa and Apple's Interface Builder it is very frustrating at times fighting with spacing and damn GtkBoxes using Glade and progmatically. Interface Builder makes it very easy to make HIG complient applications, whereas with Glade I'm still not sure of the best way and I just seem to pad everything in Gtk.Alignments.

The other thing I dislike about Gnome's HIG is it seems to recommend everything is so spaced out, and every interface ends up looking big and clunky.

Anyway, check out the Property Page and let me know what you think.

ieproto

2004-09-17T23:17:00.000+01:00

Emulating Prototyping of DOM Objects in Internet Explorer

In Mozilla all DOM objects are native Javascript objects, which means we can easily use prototypes to add methods and properties to all instances of a DOM class at once. This is very useful as it allows us to easily extend the functionality of DOM objects. Unfortuantly there isn't such an easy way to do this in IE, but we can emulate it by using behaviors and extending the document.createElement method.

To illustrate my method I've written my own getAttribute and setAttribute functions to replace the pair provided in Internet Explorer which fix the problem of having to use className instead of class and htmlFor instead of for. These need to be applied to every single DOM object.

My methods

The two methods I'm implementing are part of the Element interface, so I've created my own Element class to contain them. The functions themselves are very simple and are shown below.

Element = function () {};

Element.prototype.getAttribute = function (attribute) {
    if (attribute == "class") attribute = "className";
    if (attribute == "for") attribute = "htmlFor";
    return this[attribute];
}

Element.prototype.setAttribute = function (attribute, value) {
    if (attribute == "class") attribute = "className";
    if (attribute == "for") attribute = "htmlFor";
    this[attribute] = value;
}

How does it work

There are two places that DOM objects come from:

they're either present in the original document
or they are created using document.createElement

Adding methods and properties to elements created using the document.createElement method is easy; all we have to do is extend this function, do our modifcations and return our new object. Adding methods and properties to the elements in the original document is a little harder, we have to process each one individually, which would involve walking through the whole document. Fortunatly Internet Explorer provides an easy way to extend the functionality of all elements on a page by using DHTML behaviours.

Using Behaviours

DHTML behaviours, like the Mozilla project's XBL, allow you to bind Javascript (hence behaviours) to the DOM elements in a document.

Dynamic HTML (DHTML) behaviors are components that encapsulate specific functionality or behavior on a page. When applied to a standard HTML element on a page, a behavior enhances that element's default behavior.

Behaviours can be bound to elements using either a CSS property or progmatically using Javascript. This allows us to add Javascript methods and variables to all the HTML objects in a document using a CSS wildcard, the universal selector.

The HTC file we need simply adds the two methods, which are just references to the methods we defined above. It would look something like this:

<PUBLIC:COMPONENT>
    <PUBLIC:METHOD NAME="getAttribute"
           INTERNALNAME="_getAttribute" />
    <PUBLIC:METHOD NAME="setAttribute"
           INTERNALNAME="_setAttribute" />

    <script type="text/javascript">
        var el = new Element;
        _getAttribute = el.getAttribute;
        _setAttribute = el.setAttribute;
    </script>
</PUBLIC:COMPONENT>

Extending `createElement`

To extend the createElement method we first have to store a reference to Internet Explorer's built in method. We then define our own method in place of the default one, calling the built in method to first create the element. After creating the element it's simply a case of adding our Element interface, which includes the two methods I created above, and returning the new new element with our methods attached.

The code to do this is pretty short and is shown below:

var __IEcreateElement = document.createElement;

document.createElement = function (tagName) {
    var element = __IEcreateElement(tagName);

    var interface = new Element;
    for (method in interface)
        element[method] = interface[method];

    return element;
}

Including the Files

Adding the required CSS and Javascript to your documents is quick and painless, thanks to Internet Explorer's conditional comments, which allow authors to add HTML hidden in specially formatted comment blocks. The snippet you'll need will look something like this:

<!--[if IE]>
    <script type="text/javascript" src="attributes.js"></script>
    <style type="text/css">
        * { behavior: url(attributes.htc); }
    </style>
<![endif]-->

Here I've put the Javascript in a file named attributes.js and the HTC is in a file called attributes.htc. The conditional comment ensures that only Internet Explorer downloads these files. This is should now allow us to access the class and for attributes using the getAttribute and setAttribute in all the modern browsers, including IE.

Closure

Well, that's it, it's a pretty simple method which seems to work fairly well.

addbehaviour

2004-09-16T15:22:00.000+01:00

`addBehavior` is psuedo Asynchronous

Microsoft's documentation for the addBehavior method almost implies that the method is added to elements asynchronously. It says:

Unless the behavior specified in the addBehavior call is one of the default behaviors built into Internet Explorer, the addBehavior call causes Internet Explorer to download the behavior asynchronously, before the behavior is attached to the element.

This sentence is a little ambiguous; it could mean that the behaviour is only downloaded asynchronously and then applied to the element synchronously, or that the entire method is asynchronous, downloading and all. The next paragraph in the documentation starts Due to the asynchronous nature of the addBehavior method, its return value cannot be relied on [...], although all that can be deduced from this is that the method is not blocking, which is quite true.

If we require any of the methods the behaviour implements then it would be very useful if the addBehavior method was blocking, or if we could make it blocking. If it was actually asynchronous we could simply wait until the methods we want to use are added, probably by sitting in a while loop. Unfortuantly this doesn't seem to work, Internet Explorer will just sit in a loop forever more.

I'm not sure what this implies about the synchronous nature of the addBehavior method, but any methods added using behaviours are not exposed during the same execution path the addBehavior call was made, so as far as I am concerned this method is only pseudo asynchronous.

If you need to wait for a behaviour to be added then one way is to listen for the oncontentready event using the PUBLIC:ATTACH element in your HTML Component file; when this is called your behaviours should be there and exposed.

blogger

2004-09-13T19:58:00.000+01:00

Blogger with Comments

I've moved back over to using Blogger to publish content on this site. This way I can easily allow anyone to comment, although the Blogger interface seems to hold a prejudice against those who don't have a Blogger account, forcing posts labelled as AC.

I imagine, as always, a sparadic littering of updates administered to this site, however I wanted to get it active again so I can throw the things I'm working on out there for comment. There are a couple of coding enterprises (actually, countless) that I have undertaken, with the probability of any tangible peice of software being produced pretty damn low, but I'd like to share my ideas and see if anything would actually float.

delete.me.uk

Mozilla's Context Menus

Mozilla's Context Menus

rbNarcissus v0.2

rbNarcissus v0.2

Scope of Variables in JavaScript

Scope of Variables in JavaScript

Variable Names vs. Argument Names in Spidermonkey

Variable Names vs. Argument Names in Spidermonkey

innerHTML using a Pythonesque Template Object

innerHTML using a Pythonesque Template Object

Source Code Highlighting from the Clipboard on OS X

Source Code Highlighting from the Clipboard on OS X

Yahoo! APIs

Yahoo! APIs

JsBot, Jot and another Year

JsBot, Jot and another Year

rbnarcissus

rbNarcissus - JavaScript parsing in Ruby

e4x

ECMAScript for XML (E4X): Debunking an example

iso8601

Parsing W3C's ISO 8601 Date/Times in JavaScript

xbox

Microsoft Gen '05 at Southampton

validation

HTML Validation

Was PPK right?

Conformance with the HTML specification

Is validation moot?

proxyicon

A Proxy File Widget

wiki

WYSIWYG Wiki Markup → the WWW

excessivetabs

Tabs, Tabs Everywhere

fuzzytimepy

Fuzzy Time Python Function

fuzzytime

Humanising Date/times: Fuzzy Time

avalanche0.1

Avalanche 0.1: A BitTorrent Downloader for Gnome

btpropertypage

BitTorrent Property Page for Nautilus

ieproto

Emulating Prototyping of DOM Objects in Internet Explorer

My methods

How does it work

Using Behaviours

Extending createElement

Including the Files

Closure

addbehaviour

addBehavior is psuedo Asynchronous

blogger

Blogger with Comments

Extending `createElement`

`addBehavior` is psuedo Asynchronous