"Microsoft has completely lost the web development community."

Last year Mark Pilgrim released a free e-book/site called “Dive Into Html5” (http://diveintohtml5.org/).  The site/book has served as a valuable resource on a recent Html5 project we’re working on here at AIS, and I have frequently gone back for details on topics such as local storage and canvas.  It is an excellent book for any bleeding edge web developer.  It is so choice. If you have the means, I highly recommend picking one up.

This week, Mark posted his observations on how publishing a free e-book (which is also purchasable in print format) works well for him, and that it gives great insight into what parts of the book are being read, and by whom. He then makes the following observation:

6% of visitors used some version of Internet Explorer. That is not a typo. The site works fine in Internet Explorer — the site practices what it preaches, and the live examples use a variety of fallbacks for legacy browsers — so this is entirely due to the subject matter. Microsoft has completely lost the web development community. (emphasis mine)

I forwarded this internally within AIS, and a nice debate ensued.  One common complaint was the hyperbole of the statement, and I agree; a more accurate line would likely be "Microsoft as a browser vendor has lost significant mindshare in the bleeding edge web development community."

Personally one of the things I love about Html5 (using the term the way the hypers would – to mean modern web development with client-driven UI interactions using JavaScript, CSS(3) and some HTML5 semantics) is that it has in some ways unified the web development community:  The debate a few years ago was about JSP vs .NET vs PHP vs Python vs Rails vs someotherservertechnology.  Folks from different camps seldom interacted and learned from each other.  With Html5, the backend processes are completely irrelevant, as long as they don’t muck with the Html (ASP.NET webforms is still a major sinner here, unfortunately) and developers using all sorts of backend software and operating systems are now adding to the collective knowledge, mostly working towards the common goal of getting as much functionality as possible, pushed to end users through mostly standards compliant browsers. 

For instance, our Html5 app is backed by ASP.NET MVC 2 and SQL server.  We do all our development on Windows, in Visual Studio – we’re looking to deploy to Azure.  Clearly we’re MS developers.  But we could just as well have done the app in Php against MySql running on linux and apache, and we’re taking cues from folks using python, java, Rails, Node.js, php and God knows what on the backend.

At the same time I haven’t used IE by choice for about 5 years, maybe more…

I was asked what I thought MS could do to gain back some developer mindshare – so here goes:

• My thoughts are that if Html5 and the set of bleeding edge technologists that go with it are any kind of priority for MS,  they need to do some or all of the following:
• Find a way to upgrade the legions of IE 6, 7  and 8 users to IE9.  This will obviously not be easy,  but they could do something similar to what Google did with Chrome frame (i.e. make IE9 a plugin for the older browsers),  or they could do something like the makers of the “IE Tab” Chrome and Firefox extensions do,  allow IE to be hosted inside Chrome,  and only activate it for certain sites.  Or let users install IE9 side by side with the older versions.   All of these would have as goal to encourage end users to use the latest possible browser for the task they need it for,  and to make them install IE9 instead of Chrome or Firefox.
• Make IE9 the paragon of standards compliance.   (They are actually getting close to this...)
• Bring IE9 to WP7 and whatever tablet software they're coming out with.
• Reduce the focus of Silverlight as a browser plugin,  and make it more about web-deployed desktop apps.
• Drastically improve the support for css and javascript in Visual Studio, including debugging and unit testing.   And give this toolset away in the form of VS Express.
• Evolve the Dev tools in IE9 to become better than Chrome's inspector and the Firebug plugin.
• Separate the IE development from Windows to allow quicker iterations
• Do more things like the jQuery deal. The world of CSS is a mess (we desperately need mixins and code forks like those provided by media queries), MS could take the lead here…

The point is, whether Mark’s browser percentages are statistically valid as an indication of web developer’s preferences, or to what degree Microsoft is lagging/losing developer mindshare; these are not the pertinent questions.  The fact is that Microsoft is now not a leader in emerging web development areas – maybe they never were – but should they want to be, they need to take action. IE9 is shaping up to be a great browser, and they need to push it aggressively.

Analyzing the Amazon Universal WishList Bookmarklet

Amazon added a nifty Universal Wishlist function to their site back in August but I just discovered it today (thanks Yuriy!).  Essentially it is a personalized bookmarklet/favelet that injects code into any page, letting you add any and everything to your Amazon wishlist.

The code for the bookmarklet is this:

javascript:(function(){var%20w=window,l=w.location,d=w.document,s=d.createElement('script'),e=encodeURIComponent,x='undefined',u='http://www.amazon.com/gp/wishlist/add';if(typeof%20s!='object')l.href=u+'?u='+e(l)+'&t='+e(d.title);function%20g(){if(d.readyState&&d.readyState!='complete'){setTimeout(g,200);}else{if(typeof%20AUWLBook==x)s.setAttribute('src',u+'.js?loc='+e(l)),d.body.appendChild(s);function%20f(){(typeof%20AUWLBook==x)?setTimeout(f,200):AUWLBook.showPopover();}f();}}g();}())

Not very readable – so I decided to expand it.  I added linebreaks, and in some cases vars, {}s and in one case changed a tertiary conditional to a regular if..else statement:

//javascript:
(function() {

    //order of execution:
    //1. Initialization
    //2. Script check
    //3. Load remote script
    //4. Execute remote script


    //***Initialization ***
    //create short aliases for common objects
    var w = window, l = w.location, d = w.document;
    //create a script element and give it a short alias
    var s = d.createElement('script');
    //create some more short aliases...
    var e = encodeURIComponent, x = 'undefined';
    var u = 'http://www.amazon.com/gp/wishlist/add';

    //***Script check ***
    //if the script element was not properly created...
    if (typeof s != 'object') {
        //..navigate to the Wishlist add page, passing along the current page url and title
        l.href = u + '?u=' + e(l) + '&t=' + e(d.title);
        //effectively ends the script
    }

    //...else (script successfully created)

    //*** Load remote script ***
    //create a function that we can call recursively until the document is fully loaded
    function g() {
        //if the document is not fully loaded...
        if (d.readyState && d.readyState != 'complete') {
            //.. wait 200 milliseconds and then try again
            setTimeout(g, 200);
        } else { //... the document IS fully loaded
            //if the Amazon Universal Wishlist object is undefined...
            if (typeof AUWLBook == x) {
                //set the source of the script element to http://www.amazon.com/gp/wishlist/add.js 
                //This is a pretty complex and large JavaScript object, not discussed here
                //Essentially it displays a floating div in the top left corner of the page
                //in which the user can enter product details and select from the pictures on the
                //current page.
                //AUWLBook is personalized for each user, setting Wishlist titles and regystryIds
                //If the user is signed out, it will navigate to the Amazon sign in page, and then 
                //to the wishlist
                //If the user is signed in, it will display a floating confirmation div with options
                //of navigating to the list or "continue shopping".
                //I don't BELIEVE the loc query parameter actually alters the generated JavaScript, 
                //it must be used for other purposes
                s.setAttribute('src', u + '.js?loc=' + e(l));
                //append the script
                d.body.appendChild(s);
            }
            //***Execute remote script ***
            //create a function that we can call recursively until the AUWLBook object is fully loaded
            function f() {
                //if the AUWLBook object is not loaded yet, wait 200 ms and try again
                if (typeof AUWLBook == x) {
                    setTimeout(f, 200);
                } else { //when loaded display the pop-over div - see above
                    AUWLBook.showPopover();
                }
            }
            //call the f function
            f();
        }
    }
    //call the g function
    g();
} ())

See http://etherpad.com/10gdKmen5u for the full js with proper highlighting.

Google should buy Aptana

I guess I'm slow, cause today was the first time I heard of Aptana, its IDE, and the deliciously tempting Jaxer AJAX server, which lets you "write entire applications or presentation layers in Ajax", with "full DOM and JavaScript on the server", "seamless communication between browser and server", "database, file and socket access from JavaScript", as well as "share[d] validation code on the brower and server", all using "open-source, standards[and ...] the APIs you already know". "If you know JavaScript and HTML, you can already build Jaxer applications."

This set me off on quite the tangent, downloading Jaxer (as well as Studio), and then looking at the code examples, and how Dion Almaer (who is both on the Google Gears team and on the Aptana Advisory Board) have integrated Jaxer with Google Gears, and also how there is an MVC drive going on.  (Here's another take on (client-side) JavaScript MVC.)

Aptana is also working on a cloud solution for PHP/Jaxer/(and soon) Ruby on Rails - it certainly sounds interesting, but I'm not going to attempt to pretend I grok the underlying architecture, compared to something like the Google App Engine.

Finally, the Aptana Advisory Board reads like a Who's Who on JavaScript and Ajax frameworks.

Google should buy these guys.  It would fill both an IDE and a language-hole, and it'd be some serious competition for Microsoft's Live Mesh, Silverlight and DLR strategy.

Google AJAX Libraries API with Working Example

As is all over the blogosphere (I got it from Google Operating System), Google has decided to streamline AJAX development a bit further by hosting several AJAX libraries on Google servers, and also make them available for loading through a javascript call.

I decided to try it out, but unfortunately the example given by Dion Almaer is incomplete and also has a number of typos (both in the Google blog post and on the AJAX Libraries API home page).

Below is a working example - simply copy to a text file, rename as .htm/.html and run in your favorite browser:

<html>

<head>

<title>Google Ajax API Test</title>

<script src="http://www.google.com/jsapi"></script>

<script>

  // Load jQuery

  google.load("jquery", "1", {uncompressed:true});

  // on page load complete, fire off a jQuery json-p query against Google web search

  google.setOnLoadCallback(function() {

    $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=jquery+google&v=1.0&callback=?",

      // on search completion, process the results

      function (data) {

  if (data.responseData.results &&

            data.responseData.results.length>0) {

    //render each result

    $.each(data.responseData.results, 

       function(i, result) {

      //hacked together jquery expression

      $("<p/>").html(i+1 + ". <a href='" + result.url + "'>" + result.title + "</a>: " + result.content).appendTo("#results");

       });

        }

      });

    });

</script>

</head>

<body>

<div id="results"></div>

</body>

</html>