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;
}

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

JSFiddle with it

Why?

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
//Good:
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.

Dynamic function names in JavaScript

Creating a function with a custom name is not something you can do easily out of the box in ECMAScript. Thankfully, ECMAScript comes with a custom function constructor.

First, the basic code, which will give most of you want you want:

The above will create an anonymous function, which when called creates the named function (using the name variable). This functionality is a good substitute for when you can’t use eval() but you need a function with a custom name. Eval is generally useless in ES5 strict mode for a number of good reasons, so its best avoided.

However, an issue with the code above is that we had to write the main code into a string. This sucks because it makes it difficult to debug (i.e., we can’t easily set break points), so we want to avoid that as much as possible. The solution is to make the main function external, pass it as an argument to the Function constructor to call it.

Another advantage here is that we can set private variables inside our custom function, which can then be mixed with public arguments. Check this out!:

You can basically the start doing cool things from there, like:

The above is mega useful for dynamically implementing custom DOM-like interfaces… like shims. Enjoy! :)

Steve Jobs: the story of a sociopath

Steve Jobs, Book, by Walter IsaacsonI’ve read other semi-biographies of Jobs and, working with a lot of people in the tech industry, I’d heard many of the stories of how much of a bastard he was. However, this biography left me quite bemused and surprised: I never expected Jobs to be such a disgustingly-shameless-sociopath-brat-cry-baby! even to the last minute, with Jobs having to have control over the cover image of the book.

I don’t think he would have liked much of what is inside this book; which is what makes it great.

It’s amazing that Jobs sought out Isaacson to write this biography. And Isaacson, pre-warning Jobs that he was going to uncover all the dirt, delivers a very inhuman story. In Isaacson other book on Einstein, he also revealed Albert’s many flaws and brought Albert down to our level. With this book, he absolutely devastates the image of Jobs as a great business leader and as human being: from his stinky hippy days, to his denial of his daughter Lisa and smear campaign of the mother, to his tyrannical and plainly mean way he constantly ripped-off and mistreated other people.

I guess Job’s own reflection of his life must have been also distorted by his “reality distortion field”. It’s great that this book came out when it did. If anything, it shows that Steve Jobs was not in the same league as other great inventors and geniuses of the past century. Jobs just rode on the great ideas of those around him. If it was him that made those ideas successful is unclear, so Jobs is just shown as part of the greater collective that was, and remains, Apple computers.

I anything, it’s good that Isaacson shows why no one should take inspiration from the cold, hard, tyrannical a**hole that was Steve Jobs. A great read! And proof you can’t judge a book by its cover.

W3C Workshop on The Future of Off-line Web Applications

The W3C and Vodafone are hosting a Workshop on The Future of Off-line Web Applications on 5 November 2011, in Redwood City, California. According to the workshop website,

The goal of this workshop is to identify a clear path forward for innovation in the Open Web Platform related to offline Web application invocation and use.

As I’ve done for previous events, I’ve prepared a paper entitled ”Misconceptions about W3C Widgets” (PDF, I know… I’ll publish it here in HTMLs when I get some time).

As I am on the program committee, it means I get to review papers. I’ve actually read all the papers that have come in thus far, and it looks like it’s going to be fun workshop. The other program committee members have been a bit slack, however. I’ve only seem papers from about 2 or 3 of them. I hope Microsoft, Google, and Mozilla submit something.

What usually happens after these workshops is that a new Working Group is established. This will probably either mean:

    • The death of W3C Widgets: Google and Moz will make a powerplay and dump in their own JSON based widget format on the w3c (Moz’s offer, Google’s offer).
    • Or,  the rebirth of W3C Widgets: Google and Moz will come to their senses and finally embrace the W3C widget format (unlikely, but here’s to hoping:)).

Marking files as binary in CVS

When multiple people are working with CVS, what can sometimes happen when you do a “cvs update” is that binary files get “merged” as if they were text files. Naturally, this can cause some file types to become corrupt.

To avoid this happening, type:

$ cvs admin -kb path/to/binary.file

Usually, you have a large number of these files (in my case, I had about ~1000 zip files). So combining the above with Bash’s find can be very useful. Assuming you are in the working directory:

$ find . -name "*.ext" -exec cvs admin -kb {} ;

The “{}” substitutes the found file, which CVS marks as binary for you.

There is also a handy guide on working with binary files in CVS.

Finding the value of “xml:lang” of an element

XML Spec says that when someone declares xml:lang somewhere in the ancestor chain of an XML document, element nodes in the DOM are supposed to inherit the value of xml:lang. However, although xml:lang is an inherent part of XML, the DOM Core level 3 specs lacks means to easily find what value of xml:lang an element has inherited (or explicitly has been assigned).

From section 2.12 Language Identification of the XML spec :

The language specified by xml:lang applies to the element where it is specified (including the values of its attributes), and to all elements in its content unless overridden with another instance of xml:lang. In particular, the empty value of xml:lang is used on an element B to override a specification of xml:lang on an enclosing element A, without specifying another language. Within B, it is considered that there is no language information available, just as if xml:lang had not been specified on B or any of its ancestors. Applications determine which of an element’s attribute values and which parts of its character content, if any, are treated as language-dependent values described by xml:lang.

Below is a little useful code snippet to help you find the value of xml:lang. The code simply recurses up the tree till it finds an xml:lang attribute to inherit the value from. If it can’t find one, it just returns an empty string:


function xmlLang(element){
  var xmlns = "http://www.w3.org/XML/1998/namespace";
  var value = element.getAttributeNS(xmlns,"lang");
  //check if we are at the root 
  if(element === element.ownerDocument.documentElement){ 
      //no xml:lang? 
      if(!element.hasAttributeNS(xmlns,"lang")){
          return ""; 
       }
       //we have it, so return it. 
       return value; 
   }
  
   //this is an element in the tree 
   if(!element.hasAttributeNS(xmlns,"lang")){
       //no xml:lang? recurse upwards 
	    return xmlLang(element.parentNode); 
   }
  //we have a value, so return it
   return value;
}

To make it more useful, it would be good to validate the value derived from the code above against the IANA language tag registry.

Firefox 4 beta and geolocation

Had a brief look to see if anything had changed re: geolocation in Firefox in its first beta release of 4.0. Seems they have started to integrate an indicator into the address bar.

Firefox 4, beta 1's handling of geolocation

Firefox 4 Beta 1's handling of Geolocation...

The indicator still does not show up when geolocation is active, but it’s a start and it’s good to see that they are working to fix that.