An Easy Way to Test against Multiple Versions of IE…

Most web developers have felt the pain of having to test their webapp in N different browsers (and having to work around the quirks in each).

I just spent the better part of the afternoon testing some fluid resize logic in IE7, Chrome and Firefox. I got everything working between those three, but I knew IE6 was probably going to bite me. I only have IE7 installed locally, so I was kind of resigned to testing it later, from a separate machine.

Then a friend pointed me at the following utility which will let you run multiple prior versions of IE, side by side with your existing IE7. Its a breeze to install and works great. You can actually have IE6 and IE7 up at the same time (sweet!).

Advertisements

A 1 minute overview of JSON

JSON is (for the most part) perfectly legal JavaScript syntax, that has been around for quite a while. Think of it as shortcut literal syntax for quickly building a JavaScript object graph.

  • Every Object in JavaScript is an associative array (think Map in Java, a set of key -> value pairs).
  • In JavaScript, the curly braces {} are shorthand for “new Object()”
  • In JavaScript, the square brackets [] are shorthand for “new Array()”

So the following two snippets will build the exact same JS Object graph :

      // In JSON syntax 
      var contact = {
         'name': {
            'first': 'Lance',
            'last': 'Hankins'
         },
         'phone': {
            'mobile': '214.555.5555',
            'work': '972.555.5555'
         },
         'email':  {
            'work':'lhankins@work.com',
            'personal':'lhankins.hankins@home.com'
         }
      };

A non-JSON equivalent :

      // The more traditional NON-JSON way to do the same thing :
      var contact2 = new Object();

      contact2.name = new Object();
      contact2.name.first = 'Lance';
      contact2.name.last = 'Hankins';

      contact2.phone = new Object();
      contact2.phone.mobile = '214.555.5555';
      contact2.phone.work = '972.555.5555';

      contact2.email = new Object();
      contact2.email.work = 'lhankins@work.com';
      contact2.email.personal = 'lance.hankins@home.com';

Since JSON is so good at letting you concisely describe an object graph (hierarchical data), its often a great choice as the output format for server side responses to AJAX calls. On the client side, you can simply “eval” the response text to create the resultant JS object graph.

Here’s another link which also describes JSON in a concise form – and has a funny picture 🙂 Also, this post describes some of the exception cases where JSON is not actually legal JS (JS is a little more restrictive on the allowed characters for property names).

Subtle Difference Between JavaScript Evaluation in IE vs. Firefox…

I came across an annoying difference between the way IE and Firefox interpret JavaScript array lengths. Consider the following snippet:


var a1 = [1,2,3,4];
var a2 = [1,2,3,4,];

alert("a1.length = [" + a1.length + "], a2.length = [" + a2.length + "]");

So basically the only difference between a1 and a2 is that a2 has a trailing comma at the end of the array initializer (legal in both Java and JavaScript). Anyway, in Firefox, the lengths of these two arrays are the same (as I would expect), the alert evaluates to :

a1.length = [4], a2.length = [4]

In IE, however, the lengths are different (it actually increases the size of the array for the trailing comma – <sigh>)

a1.length = [4], a2.length = [5]

Grrrrr…