W3C TAG elections

I recently learned through reading Alex Russell’s blog that Google had nominated him as a candidate on the upcoming W3C Technical Architecture Group elections. I thought this was great, as I more often then not find myself in violent agreement with Alex on how browsers should expose their guts to developers (amongst other things). As Alex put it:

I’m running to try to turn the TAG into an organization that has something to say about the important problems facing devs building apps today; particularly how new specs either address or exacerbate those challenges.

I thought it would be great to finally have someone who cares about the challenges that Web developers face represented on the TAG. So it then came to me as a bit of a humbling surprise that I had also been nominated (by Nokia) and asked to run by Robin Berjon. Admittedly, I was hesitant (and I still am) as I don’t know much about the TAG.

To us humble outsiders, the TAG has always been the Ivory Tower of the old guard of the Web: you know, where the guys that started it all pontificate about the nuances of URIs, HTTP Range 14 (don’t worry, I have no idea what the hell that is either!), and the mythical semantic web.

Because of the somewhat obscure range of topics, the TAG’s discussions have been the butt of many jokes on the Web (e.g., the fake tag) and humorous pictures on W3C Memes. It has also become synonymous with architecture astronautism. This is a shame, because, as Alex points out, it could be a force for the greater good, but the interactions with other working groups is generally been limited (and certainly does not appear to be focused on pursuing the issues relevant to Web developers who end up using the stuff coming out of the W3C).

Given the negative perception of the TAG, I basically share Alex’s “goal of turning the TAG into an advocacy organization for the interests of webdevs.” If elected, I want to work with other “reformist-minded candidates” (namely, Anne van Kesteren and Yehuda Katz) towards making that happen.

What and how?

Some proactive things that could be done by the TAG to meet the goal above include:

  • Take the discussion to where developers are (Google+, Twitter, GitHub, etc.) – ask them what the TAG should focus on (or make the case to developers to show that there is value in the TAG).
  • Talk to developers and find out what their pressing issues are. Do this by attending actual developer conferences and similar forums. See if we can make the TAG something cool and respected again!
  • Instead of publishing findings at the W3C, publish findings in the popular developer press (e.g., A List Apart, Smashing magazine, .Net magazine, HTML5 Rocks, or similar) – i.e., where developers can actually read the findings, and in a common voice. Make TAG members available for interviews to media.
  • Make time available to talk to developers on a regular (e.g., bi-monthly Q&A sessions on Google+)
  • Help developer-based Community Groups (e.g., the RICG and the Extensible Web CG) with navigating the process of adding things to the Web platform.
  • Work more closely with WebApps WG, System Apps, HTMLWG/WHATWG to make sure their API designs stay in sync and don’t cause developers unnecessary pain.
  • Advocate to W3C Working Groups for more clear specs that meet the needs to developers as well as implementers.

If you have more/better ideas of what could be done to make the TAG more relevant to developers, please let me know in the comments.

How to vote

Unfortunately, voting is W3C member only. But otherwise, you need your AC rep to nominate a candidate (instructions).

What’s my pitch

This is what I submitted to the W3C as my pitch to get votes:

Over the last 6 years, Marcos’ background in interaction design has brought a unique perspective to Web standards. Long before there was the “Native Apps vs Web Apps” debate, Marcos was leading the charge to standardise installable web applications at the W3C through the Widgets family of specifications. Until recently, Marcos worked as a software architect at Opera Software, where he led the team that created Opera Widgets and Extensions platforms. Aside from his work on installable web applications, Marcos has been involved in numerous efforts to bring device APIs to the Web. To the TAG, Marcos can bring hands-on experience dealing with the architectural challenges that come from designing, deploying, and running installable web apps – and how those apps can safely interact with device APIs. For more information about Marcos’ qualifications, please see Marcos at LinkedIn.

The W3C has also published the list of other candidates.

Generating an sequence of unicode characters

Here is a slightly useless, yet sometimes handy, function if you quickly need to spit out an ordered sequence of unicode characters between a range (e.g., U+007F to U+009F).

 * If you need the string representation, there is a handy
 * 'unicode' property you can query on the returned object.
 * @param {string} from   is a HEX code you want to start from.
 * @param {string} to   is a HEX code you want to end with.
 * @return {array} the unicode range from - to.
function unicodeSequence(from, to) {
    'use strict';
    var code,
        index = parseInt(String(from), 16),
        end = parseInt(String(to), 16),
        result = [],
        unicode = '';
    if (isNaN(index) || isNaN(end)) {
      throw new TypeError('Invalid input');
    for (; index <= end; index++) {
      code = index.toString(16).toUpperCase();
      //makes unicode code  like '00AB'
      while (code.length < 4) {
        code = '0' + code;
      //concatenate so we get a unicode string
      result.push('\\u' + code);
      unicode += String.fromCharCode(index);
    Object.defineProperty(result, 'unicode', {
      get: function() {
        return unicode;
    return result;

var r = unicodeSequence('40', '7E');
console.log(String(r.join(', ')));

JSFiddle with it


In a lot of specs (e.g., in HTML), you see unicode ranges that when encountered have particular side effects (e.g., a parse error). In the specs, however, instead of listing out all the values in a range, the editor will just write, for example, “U+007F to U+009F“. So, obviously, when implementing a spec, one needs a way of expanding these ranges.

Nested inheritance in Javascript

Most examples of javascript inheritance only go one level deep (for example, Student inherits (→) from Person). That’s all well and good, but what if you have a long chain for things you want to inherit from?

Say we have A → B → C → D → E, and each has its own methods and attributes. How can they inherit from each other cleanly?

Here is the initial solution:

So, what’s special about the above. Not much… except the the only gotcha is the ordering of:

//you need to make sure you don't override your functions
X.prototype = new Y();
X.prototype.foo = function(){ .... };

//Bad (trashes foo!)
X.prototype.foo = function(){ .... };
X.prototype = new Y();

Adding methods and properties

Once we have a chain, we naturally want to make objects created from that chain do something useful. The above A, B, C, etc. is a little academic, so lets now use a more “real world” example.

Lets say we have the following inheritance chain of vehicle types:

Vehicle → LandVehicle → Car → SportsCar → RacingCar

We assume that all Vehicles have a “registration” property that is unique for each vehicle we create:

The problem when we run the above is that the registration is not unique! When we are constructing the new RacingCar(), we are using the same prototype for all instances (in fact for any kind of Vehicle).

To solve this problem, we need to make sure that for “this” instance we are given a unique “registration”. To do that, we need to “call()” the function from which we are inheriting from using “this“, like so:

function RacingCar(){Vehicle.call(this)}

So, that makes sure that “this” (whatever that is associated with) gets the right “registration” number (i.e., a random number):

Ok, so far so good… but if we start adding methods and unique properties on each level, we are going to have the same problem. So what we can do is just cascade “this” through the inheritance chain:

function LandVehicle(){Vehicle.call(this)}
function Car(){LandVehicle.call(this)}
function SportsCar(){Car.call(this)}
function RacingCar(){RacingCar.call(this)}

Now we can start individualising each object to our needs. The following shows a complete set of custom objects that inherit from each other. It also shows “static” functions and property being declared (e.g., the make of a Car and getting a randomMake() for either a bike or car):

So there you have it. Classical inheritance JavaScript styles.