"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.

Seadragon.com is now Zoom.it

Microsoft Live Labs recently rebranded their SeaDragon public Deep Zoom service ‘Zoom It’ and put it at http://zoom.it

They now have an API for Silverlight, .NET and JavaScript, allowing you to submit the url of your image to deep zoom, returning the url for your Deep Zoom Image (DZI). Or, for the non-programmatic approach, you can simply submit your url through the browser at http://zoom.it (the same way you could previoously through seadragon.com).

Completed DZIs are given a very short, incremental url, e.g. http://zoom.it/10ms, and you also get the embed code to put the image on your own site, like so:

The embed code for the above is exceedingly simple:

<script src="http://zoom.it/l6BK.js?width=auto&height=400px"></script>

Fun with 1000 Rolling Stone covers, AndreaMosaic and the Deep Zoom Composer

UPDATE 08/11/2011: See post about the new archive, now also for the iPad here: archive.rollingstone.com – another feather in our cap

Having finished helping Rolling Stone magazine put their archive online (our company, AIS, together with Bondi Digital, did the Silverlight-based archive portion (more on the project later, potentially), another company did the main site), I decided to get artsy by generating a mosaic of the latest issue cover, by using thumbnails of some 1000 previous covers.

AndreaMosaic worked beautifully in creating the mosaic, and even pre-generating the starting point for a Deep Zoom image.  I opened that in Deep Zoom Composer, and generated both a Silverlight and an Seadragon Ajax version of the composite.  I then uploaded the whole shebang to my public s3 bucket.

It all took a bit of fiddling to get right, but if I had to do it again I could probably do the whole thing in 5-10 minutes…  It’s that easy. (Seriously, this blog post is taking longer…)

• Seadragon version
• Silverlight version

Of course, now that I’m putting in all the links in this post, I realize I could have simply hosted this at seadragon.com…  Oops.

UPDATE:Since MS is so kind to do the processing for me, I figured I might as well create a bigger version of this. The following is around 180MP, made up of 3000 tiles, each 300px tall... Click the full screen button in the embedded viewer for the best effect.

Update, May 12th: ...and here's the latest 2-page cover:

Looking through the source of SharePoint on SharePoint

Microsoft launched their new SharePoint site a few days ago, and for the first time the SharePoint site is actually hosted on SharePoint (!).  It’s a nice looking site, with a dynamic user interface, courtesy of AJAX and Silverlight.  I decided to take a closer look at the visible source code – that is, the rendered HTML, JS, CSS, and Xap files.

Below are some observations:

• They’re first loading the OOTB stylesheets, including HTML Editor and core.css (all 4K+ lines of it), completely unmodified, then they override the defaults with additional stylesheets (the MSCOMP_Core.css is another 4K+ lines of css) – seems inefficient?
• They only load Core.js if authenticated, through a custom server control:
  <!-- RegisterCoreJSIfAuthenticated web server control -->
  <span id="ctl00_RegisterCoreJsIfAuthenticated1"></span>
• Interestingly MS uses Webtrends
• They use custom js to get around the name dll:
  <script type="text/javascript" src="/_catalogs/masterpage/remove_name_dll_prompt.js"></script>
• There’s extensive Control look and feel customization through Control specific CSS
• A lot of their stylesheets reference slwp_something – SilverLight WebPart perhaps?
• The viewstate looks pretty nasty but in the end is only 61KB, which I guess is acceptable
• The page includes the standard minified versions of MicrosoftAjax.js, MicrosoftAjaxWebForms.js, and SilverlightControl.js
• The on-page Silverlight initialization code is NASTY, not sure if this is standard for Silverlight, or if this is an ugly exception.  Why not use JSON?  Why use encoded javascript?  Here’s a very short random sample – note that they didn’t bother getting rid of spaces (%20) before encoding:
  SiteNavigationDefinition%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FChildSites%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FSiteNavigationDefinition%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3CSiteNavigationDefinition%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSelected%3Efalse%3C%2FSelected%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSiteName%3EECM%3C%2FSiteName%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CSiteUrl%3E%2Fproduct%2Fcapabilities%2Fecm%2FPages%2Fdefault.aspx%3C%2FSiteUrl%3E%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C
  Best of luck debugging that.
• There’s a mix of absolute and relative references to the same image library, (but that’s a very picky observation)
• YSlow result:  D, pinging it on number of HTTP requests, lack of a CDN (why doesn’t MS have a CDN?), Expirations headers, ETags and not minifying JS and CSS, but overall size is not bad for a MOSS page, especially not one this visually engaging – but then it turns out YSlow does not account for loading of Silverlight content – the Xap files for the Top Nav and main control are 240KB and 632KB, respectively:
  
• The XAP files also contain some interesting content, like this test image for the header – but they’re not actually using fast for the search…
  
• They use an Image Transitioner component from Advaiya (sidenote – pure Silverlight websites are just as annoying as pure Flash websites), who has supported MS on other Silverlight initiatives – wonder if the SL pieces were outsourced to them?

So – all in all a nice looking site, but I have some questions as to the completeness of the project.  Maybe it’s just me, but if I was Tony Tai (MS SharePoint Product Manager), I would spend another week finishing things up a bit…