The Problem Solver : dotnetmag

HTML5 TechDays material

Maurice — Fri, 17 Feb 2012 10:33:34 GMT

Several people asked about getting the slides and samples from my HTML5 talk at the TechDays conference in the Netherlands. You can download the slides and the sample if you like.

Enjoy!

TheProblemSolver
DotNetEvents

How to data bind to collections using Knockout.js

Maurice — Thu, 16 Feb 2012 07:06:00 GMT

In the previous two blog posts about getting started with Knockout.js and controlling updates using Knockout.js I showed to to get started with the awesome Knockout.js library. In this post I am going to show how easy it is to load a collection of items from a REST service and data bind to the complete collection.

To data bind to collections of data Knockout supports the foreach data binding. This lets us point at a collection of data and create a new item for each object in the collection. In the example below I am using an html <table> to display a list of books. The <tbody> has the data binding attribute so its contents are going to be repeated for each item in the collection being used, books in this case.

<table border="1">

    <thead>

        <tr>

            <th>

                Title

            </th>

            <th>

                Author

            </th>

        </tr>

    </thead>

    <tbody data-bind="foreach: books">

        <tr>

            <td data-bind="text: title">

                This will be the title

            </td>

            <td data-bind="text: author">

                This will be the author

            </td>

        </tr>

    </tbody>

</table>

So this looks, and is, very much like a data template but a little different. Normally when using JavaScript templates the actual template is stored as a string somewhere, often in a script block, and you don’t get to see anything until you actually use it. However in this case it is just HTML and without Knockout.js will be rendered as regular HTML. So if we just render this as is we get the following output in the browser.

Nice as this makes debugging the data template layout a lot easier.

Next we need to create a ViewModel and use Knockout to data bind it.

The basic ViewModel we need is really simple, all it needs to expose is a books array. To make sure the UI is updated with changes we don’t use a simple array but an observableArray as shown below. And if we call applyBindings() the data binding will be activated.

$(function () {

    var viewModel = {};

    viewModel.books = ko.observableArray();

    ko.applyBindings(viewModel);

});

With this data binding is functional but we don’t have any data to display yet. As expected this results in an empty array. Notice the data template row is gone now.

Adding some data is easy. I have included a WCF Web API REST service here and the jQuery.getJSON() function makes it rather easy to consume the REST service with a few lines of code. In this case I am using the jQuery.each() function to process each object returned and I turn them into objects with observable properties, not strictly required here, and push them into the books observable array. This last push will cause the UI to update itself because of the data binding. The complete JavaScript code looks like this:

$(function () {

    var viewModel = {};

    viewModel.books = ko.observableArray();

    ko.applyBindings(viewModel);

    $.getJSON("/services/books").then(function (books) {

        $.each(books, function () {

            viewModel.books.push({

                title: ko.observable(this.Title),

                author: ko.observable(this.Author)

});

});

});

});

And the end result:

Sweet

Enjoy!

TheProblemSolver
DotNetEvents

DotNed Podcast: Roland Guijt over moderne web ontwikkeling met Knockout.js

Maurice — Mon, 13 Feb 2012 10:22:00 GMT

In deze podcast spreekt Maurice de Beijer met Roland Guijt over de moderne manier van het ontwikkelen van web applicaties. Roland verteld over het gebruik van Knockout.js voor de data binding van data aan de HTML elementen on de browser. Verder verteld hij waar hij jQuery allemaal gebruikt en geeft hij diverse tips over het ontwikkelen van single page web applicaties.

De podcast is hier te downloaden.

Voor het gemak kan je natuurlijk ook een RSS feed, iTunes of Zune link gebruiken.

Enjoy!

TheProblemSolver
DotNetEvents

Windows Workflow Foundation 3 Types Marked Obsolete in .NET 4.5

Maurice — Thu, 09 Feb 2012 13:42:18 GMT

People have been wondering for a while what the future of WF3 was since the release of WF4. So far both workflow stacks have coexisted in .NET 4 and there has been no official statement about the future of the older WF3 stack.

That has just changed!

The workflow team at Microsoft has just announced that they are marking the WF3 stack as deprecated with the next release of the .NET framework, .NET 4.5.

Of course the types are still there but you will get compile time warnings for using them and you can expect the classes to be dropped some time in the future.

“Warning BC40000: X is obsolete: ‘WF 3 types are deprecated. Please use WF 4 instead.’”

So if you are sill using WF3 this is a good moment to invest the time and start learning Wf4.

You can read the official announcement here.

Enjoy!

TheProblemSolver
DotNetEvents

Controlling when the value is updated with Knockout.js

Maurice — Wed, 08 Feb 2012 10:02:00 GMT

In the previous blog post about Knockout.js I showed why and how to get started with Knockout.js. And I explained that the reason I really like Knockout.js is that it is a very familiar way of working with its MVVM style.

I created a small demo where we could update the first and last name of a person and the ViewModel would combine the two and display the concatenated parts as the complete name. This worked just fine as soon as I started using observables except for one thing. Whenever I start typing the full name isn’t updated until the <input> control losses focus.

Quite often this will be good enough as the resulting value isn’t used right away but there are cases, like here, where it is and we want more frequent updates.

The value binding

As it turns out the value data binding has an additional option, the valueUpdate, that controls when the value, and therefor the computed observable full name is updated. By adding that to the data-bind expression we can get real time updates. There are several options but for these real time scenarios using the value of afterkeydown works best.

The markup now looks like this:

<fieldset>

    <legend>Enter person</legend>

<p>

        First name:

        <input type="text" data-bind="value: firstName, valueUpdate: 'afterkeydown'" />

    </p>

<p>

        last name:

        <input type="text" data-bind="value: lastName, valueUpdate: 'afterkeydown'" />

    </p>

<p>

        Full name: <span data-bind="text: fullName"></span>

    </p>

</fieldset>

The JavaScript is unchanged and looks like this:

$(function () {

    var viewModel = {};

    viewModel.firstName = ko.observable("Maurice");

    viewModel.lastName = ko.observable("de Beijer");

    viewModel.fullName = ko.computed(function () {

        return viewModel.firstName() + " " + viewModel.lastName();

});

    ko.applyBindings(viewModel);

});

With this change the full name is updated with each character entered.

Sweet

Enjoy!

TheProblemSolver
DotNetEvents

How to get started with Knockout.js

Maurice — Mon, 06 Feb 2012 09:31:00 GMT

Once you get into doing more client side JavaScript code with business applications and REST services you are going to run into the question of how to construct the client side HTML required to show the data to the users.

Using jQuery

Assuming most people are going to be using jQuery on the client you might start with some jQuery code to generate HTML.

Your code might look something like this

$(function () {

    $("#btn").click(function () {

        $.getJSON("/services/books").then(function (books) {

            $.each(books, function () {

                $("<li>").text(this.Title + " by " + this.Author).appendTo("#books");

});

});

});

});

The code isn’t very complicated but then we are only showing a simple bit of text. And in all likelihood the actual HTML that needs to be generated will be quite a bit more complex. And the code increases as least as much, but often much more, in complexity.

Using templates

The next step people tend to take is using templates. There are lots of different templating libraries out there with more coming but in this example I am using the JavaScript Micro-Templating function John Resig wrote. If you are looking for others take a look at Underscore.js or JsRender/JsViews (still in preview at the moment). Specially Underscore.js is a nice library to look at because all the additional functions in there.

Using templates we separate the code from the template to generate the required HTML. The code is easier to understand.

$(function () {

    $("#btn").click(function () {

        $.getJSON("/services/books").then(function (books) {

            var html = tmpl("books_tmpl", { books: books });

            $("#books").html(html);

});

});

});

However this comes at a cost as we also need a template and that is a mixture of markup and expressions. The expressions syntax varies depending on the templating engine, in this case it’s <%= JavaScript Expression %>. Not hard to use but it is another bit of executing code that has to be maintained.

<script type="text/html" id="books_tmpl">

  <% for ( var i = 0; i < books.length; i++ ) {

    var book = books[i];%>

    <li><a href="/services/books/<%=book.Id%>"><%=book.Title%> by <%=book.Author%></a></li>

  <% } %>

</script>

As you can see the template is actually embedded as a <script> block. Not a requirement as it is just a string but an easy way to do so. It does however mean that you have to handcraft the HTML with no designer or IntelliSense support.

Using Knockout.js

As soon as we start using Knockout.js this become somewhat more like Silverlight/WPF. Not that it is exactly the same but it uses the same MVVM pattern and data binding that Silverlight developers are used to. Something I really like . Now Knockout.js is my no means the only way to do this, just as with templates there are plenty of other options like Backbone or JavaScriptMVC for example. See this blog post for a longer list of alternatives.

Personally I really like the MVVM and binding style Knockout.js uses.

Instead of splitting the HTML into a static and a dynamically generated part with Knockout.js you embed data binding expressions in your HTML. Notice the data-bind attributes in the following HTML snippet. They indicate data binding syntax. The first two data bind the value property of the <input> control to the firstName and lastName from the ViewModel. The third data binds the text in the <span> against the fullName of the ViewModel.

<fieldset>

    <legend>Enter person</legend>

<p>

        First name:

        <input type="text" data-bind="value: firstName" />

    </p>

<p>

        last name:

        <input type="text" data-bind="value: lastName" />

    </p>

<p>

        Full name: <span data-bind="text: fullName"></span>

    </p>

</fieldset>

So what does the view model look like? It can be a real simple JavaScript object. In fact the following would work. It would be less than perfect thou and we can do better.

var viewModel = {

    firstName: "Maurice",

    lastName: "de Beijer",

    fullName: "Maurice de Beijer"

};

A better way is to use the Knockout functionality and define the data fields using observables. By using Observables we can observer changes being made. And by defining the fullName as a computed observable we can have the <span> with the fullName dynamically update. A much better ViewModel:

var viewModel = {};

viewModel.firstName = ko.observable("Maurice");

viewModel.lastName = ko.observable("de Beijer");

viewModel.fullName = ko.computed(function () {

    return viewModel.firstName() + " " + viewModel.lastName();

});

Of course we still need to tell Knockout to use the ViewModel and that takes all of one line:

ko.applyBindings(viewModel);

So the complete JavaScript in my page is now:

$(function () {

    var viewModel = {};

    viewModel.firstName = ko.observable("Maurice");

    viewModel.lastName = ko.observable("de Beijer");

    viewModel.fullName = ko.computed(function () {

        return viewModel.firstName() + " " + viewModel.lastName();

});

    ko.applyBindings(viewModel);

});

And the nice thing is that updating the first name automatically updates the fullName

This is just the first baby steps using Knockout.js as it is far more capable than just this. In fact we can data bind against arrays of data and create nice list etc. The Knockout.js site has some nice tutorials that will help you get started.

Enjoy!

TheProblemSolver
DotNetEvents

DotNed Podcast: Koen Zwikstra over Silverlight 5 en de toekomst van Silverlight

Maurice — Fri, 27 Jan 2012 10:39:00 GMT

Er is weer een nieuwe DotNed podcast online. In deze podcast spreekt Maurice de Beijer met Koen Zwikstra over de recente Silverlight 5 release en hoe de toekomst er voor Silverlight ontwikkelaars uitziet. Verder vertelt hij over Silverlight Spy een runtime inspector waarmee je willekeurige Silverlight applicaties kan inspecteren. Hij kondigt ook nog even aan dat hij druk bezig is met een Spy voor Metro applicaties op Windows 8.

Links:

Blog: http://firstfloorsoftware.com/blog/
First Floor Software: http://firstfloorsoftware.com/
Silverlight Spy: http://firstfloorsoftware.com/silverlightspy/
Balder - 3D engine for Silverlight: http://balder.codeplex.com/

enjoy!

TheProblemSolver
DotNetEvents

Deploying SqlServerCe with an ASP.NET MVC application

Maurice — Tue, 24 Jan 2012 10:50:00 GMT

Using Entity Framework Code First together with SqlServerCe is a great way to work with small databases in ASP.NET MVC applications. I have several web applications running on shared hosting sites where SqlServerCe is the database engine under the hood. Deploying is also quite easy. I typically use the build in Publish Web option which works great over FTP.

When using SqlServerCe you have to make sure you add the deployable dependencies. Forgetting those results in pretty clear error messages.

However once that is done I always run into another issue. When a page actually tries to use SqlServerCe I will see a security exception:

System.UnauthorizedAccessException: Access is denied. (Exception from HRESULT: 0x80070005 (E_ACCESSDENIED))

The solution is simple enough. Go to whatever security portal your provider is using, mine is using Plesk, and make sure the user that is actually running the web site has the required read/write privileges to work with the Bin folder.

Enjoy!

TheProblemSolver
DotNetEvents

HTML5, Internet Explorer and automatic updates

Maurice — Mon, 23 Jan 2012 10:24:00 GMT

One of the problems with HTML5, or development at the cutting edge of the web, has always the need to support a large number of different browsers. Depending on who you ask the numbers will vary slightly but is usually boils down to Internet Explorer being the biggest and Chrome and FireFox each taking quite a big chunk of the stats and the remainder of the browsers filling up the gaps.

So that means that any public facing website should at the very least support the three major browsers, not to bad right?

Turns out that live isn’t quite as good as that. With Chrome and FireFox most users are at or close to the last revision of the browser but with Internet Explorer this isn’t the case. In fact as the chart below shows the majority is still using IE8 with IE9 only accounting for a little over a third of all IE users.

So what the big difference?

There are 2 reasons.

First of all IE9 is only available on Windows Vista and Windows 7 and it turns out there is still a substantial number of people using Windows XP. For all those users Internet Explorer 8 is the latest version of the browser they can use. And that is not going to change when Internet Explorer 10 ships. However that number of XP users isn’t that large.

The second and more important reason is that Microsoft doesn’t automatically update Internet Explorer when a newer version is available. You can download it if you want to but if you don’t explicitly do so nothing happens. And by contrast all recent versions of FireFox and Chrome are self updating, so whenever a new version is available it is downloaded without any explicit user action. The benefit is that with both Chrome and FireFox a web developer wanting to do cutting edge HTML5 stuff can be pretty confident that a user has an up to date browser. Well except with Internet explorer that is

Microsoft has seen the update light

Fortunately that won’t be a problem much longer. Recently Microsoft has announced that it will start auto updating Internet Explorer using Windows Update. So no longer are we dependent on users going in and manually doing an update, instead if they don’t take any action they will be automatically upgraded to the last possible version of IE. This means that we should soon see at leas two thirds of all IE users use IE9, and more important for HTML5 developers, a more compliant browser with a much faster JavaScript engine.

Of course IE9 still isn’t perfect because it supports less HTML5 features than both Chrome and FireFox but the fact that the JavaScript engine is much faster makes it much easier when using polyfills to insert missing pieces. And the fast JavaScript engine and more compliant rendering engine is great news for all web developers

And the this update will mean that adoption of IE10 will be a lot faster when it ships later this year.

The auto update doesn’t start worldwide right away. At first it will start in Australia and Brazil only. But when that is done they plan on doing so in more countries around the world.

A big step forwards for Microsoft and a huge step forward for HTML5 developers all over the world

Enjoy!

TheProblemSolver
DotNetEvents

Getting Started with WCF and Rest material

Maurice — Fri, 20 Jan 2012 08:24:29 GMT

Thanks everyone for joining in with the DevelopMentor webinar I did last night on Getting Started with WCF and Rest.

If you want to take another look at the slides or samples you can download them using the links below:

For more info about the WCF Web API you can check the WCF CodePlex site.

Enjoy!

TheProblemSolver
DotNetEvents

Wat doe ik met HTML5 op de Microsoft TechDays 2012?

Maurice — Thu, 12 Jan 2012 22:24:24 GMT

Uiteraard ben ik ook dit jaar weer aanwezig op de Microsoft TechDays 2012. Voor degene die het gemist hebben de TechDays zijn dit jaar van 15 t/m 17 februari in Den Haag.

Ik doe dit jaar twee sessies:

Op vrijdag middag doe ik een sessie over het maken van een HTML5 client voor REST services.
Het maken van een REST service is pas deel een van een oplossing. Nadat deze er is moet er meestal ook een grafische interface voor gemaakt worden. En in de huidige tijd, waar het ondersteunen van diverse devices steeds belangrijker wordt, komt het maar al te vaak voor dat deze gebruikers interface in HTML geschreven wordt. Helaas blijken de verschillende browsers maar al te vaak voor extra problemen te zorgen die het leven van de ontwikkelaar een stuk moeilijker maken. In deze sessie laat Maurice de Beijer zien hoe je effectief de verschillende problemen waar je als ontwikkelaar tegenaan loopt kan oplossen.
Op donderdag avond tijdens de Geek Night doe ik mijn populaire HTML5 sessie nog een keer.
Maar uiteraard moet dat tijdens de Geek Night wel een beetje anders dus het wordt een sessie met een twist

Tot daar!

TheProblemSolver
DotNetEvents

HTML5 Presentatie slides en demo

Maurice — Fri, 06 Jan 2012 12:31:46 GMT

De PowerPoint slides en de demo code van mijn HTML5 presentatie van gisteravond zijn nu beschikbaar.

Voor de liefhebbers ook online via SlideShare.

HTML5 Overview

View more presentations from Maurice Beijer

Met dank aan 4DotNet die de sponsor was van deze bijeenkomst.

Enjoy!

TheProblemSolver
DotNetEvents

DotNed podcast: Freena Eijffinger over Autisme en de Surface

Maurice — Wed, 04 Jan 2012 10:47:00 GMT

In deze podcast spreekt Maurice de Beijer met Freena Eijffinger over autisme en hoe Freena de Microsoft Surface tafel gebruikt om autisme te diagnotiseren bij kinderen.

Met dank aan onze sponsor: Red-Gate, ingeniously simple tools

Links:

Autitouch: http://www.autitouch.com/
Freena: http://www.freena.nl/
Hart van Nederland: http://www.hartvannederland.nl/nederland/2011/autisme-snel-vastgesteld-door-game/
BizSpark: http://www.microsoft.com/bizspark/

Enjoy!

TheProblemSolver
DotNetEvents

TechDays wildcast sessies

Maurice — Fri, 23 Dec 2011 10:34:00 GMT

De TechDays, zie #TechDaysNL, komen er alweer snel aan. Maar net zoals vorig jaar zijn er ook dit jaar weer een aantal wildcard sessies die afhankelijk van de stemmen al dan niet op het programma komen.

Ga dus snel naar de lijst en stem op je favoriete sessie!

Enjoy!

www.TheProblemSolver.nl
www.dotnetevents.nl

#DotNed podcast: Bart De Smet over RX (Deel 2 van 2)

Maurice — Tue, 20 Dec 2011 10:28:00 GMT

In deze podcast spreekt Maurice de Beijer met Bart De Smet over het RX framework. Bart werkt bij Microsoft aan de RX librray en verteld hoe deze ontwikkeling oorspronkelijk is begonnen als een onderdeel van een veel groter cloud programmability project.

Link

Enjoy!

TheProblemSolver
www.dotnetevents.nl

HTML5 sessie bij 4DotNet in Utrecht

Maurice — Thu, 15 Dec 2011 11:03:00 GMT

Op donderdag 5 januari 2012 beginnen we het nieuwe jaar met een herhaling van de sessie van Maurice de Beijer over HTML5. Deze avond wordt gehost door 4dotnet en zal plaats vinden in Utrecht.

Er wordt al tijden veel over de nieuwe HTML5 standaard gesproken. Maar wanneer kan je als ontwikkelaar nu eigenlijk met HTML5 aan de slag? En als je het kan gaan gebruiken wat heeft het eigenlijk allemaal te bieden? Hoe zit het met al die oudere browsers die mensen misschien nog gebruiken? En dan hebben we natuurlijk nog de vraag wat ik moet doen als ik tussen Silverlight en HTML5 moet kiezen voor een nieuwe applicatie?

In deze sessie geeft Maurice de Beijer antwoord op deze vragen. Hij laat onder meer diverse nieuwe HTML5 onderdelen zien als local storage, web sockets, achtergrondtaken en nieuwe elementen zoals de video tag en het canvas. Daarnaast zal hij laten zien hoe je kan omgaan met browsers die de verschillende nieuwe HTML5 onderdelen nog niet ondersteunen.

HTML5 is niet alleen belangrijk als web-taal, maar ook in de nieuwste versie van Windows zal het maken van applicaties op de Windows Runtime met HTML5 een belangrijke optie worden. Dus als je webontwikkelaar bent, als je XAML ontwikkelaar bent en je wilt de ‘concurrentie’ in de gaten houden, of je wilt gewoon op de hoogte blijven van de laatste technieken: hier moet je bij zijn!

Je kan je hier inschrijven.

www.TheProblemSolver.nl
www.dotnetevents.nl

HTML5 Video

Maurice — Tue, 13 Dec 2011 11:05:00 GMT

Video has always been a difficult thing on the web. With HTML5 supporting the <video> element that should become a lot easier right? After all you just add a video element, set the source and you are good to go right?

If you create a page like this:

<!DOCTYPE html>

<html>

    <head>

        <title>HTML5 Video demo</title>

        <style>

            video

                height: 200px;

                width: 400px;

        </style>

    </head>

    <body>

        <video poster="http://images.apple.com/html5/showcase/video/images/tron_legacy.jpg"

               src="http://www.apple.com/105/media/us/html5/showcase/2011/demos/apple-html5-demo-tron-us_848x352.webm"

               controls

               autoplay>

                   HTML5 Video element not supported

        </video>

    </body>

</html>

And run it in Google Chrome its start playing just like this:

Simple enough right?

However when I open the page in Internet Exporer 9 or FireFox we get this:

The video element loads the movie poster but it doesn’t start playing.

And on Safari or an older version of IE we get:

Turns out that on Windows Safari doesn’t support the HTML5 <video> element and wants users to install and use Quicktime instead. And that even though according to CanIUse.com the video element is supported on the current version of Safari I am running

So what gives?

The problem with IE9 and FireFox not playing the movie has to do with video formats. While there is an HTML5 definition of the <video> there is no definition of the video source stream. It is left up to the bowser vendors to decide on the supported standard and implement these. And as the vendors can’t agree on a standard we as developers are basically stuck with having to provide multiple video streams with different encodings Not nice but that is politics for you. There is a good table on Wikipedia describing the formats supported in each browser. But the simple story is we need to supply at least 2 formats, for example H264 and WebM.

The solution

In order to fix this we can supply multiple <source> elements and let the browser pick the appropriate format.

<!DOCTYPE html>

<html>

    <head>

        <title>HTML5 Video demo</title>

        <style>

            video

                height: 200px;

                width: 400px;

        </style>

    </head>

    <body>

        <video poster="http://images.apple.com/html5/showcase/video/images/tron_legacy.jpg"

               controls

               autoplay>

               <source src="http://www.apple.com/105/media/us/html5/showcase/2011/demos/apple-html5-demo-tron-us_848x352.webm"

                       type='video/webm; codecs="vp8, vorbis"'>

               <source src="http://movies.apple.com/media/us/html5/showcase/2011/demos/apple-html5-demo-tron-us_848x352.m4v"

                       type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

                       HTML5 Video element not supported

        </video>

    </body>

</html>

You can try the effect for yourself here.

One more hurdle

So in IE9 and Chrome this works just fine but in FireFox we still don’t get to see the video. This is strange as FireFox is supposed to be able to display WebM videos, what gives?

The problem is in the way the video stream is served from the web. The video stream is returned with an HTTP header:

Content-Type: text/plain; charset=UTF-8

and it turns out FireFox is a bit picky about the Content-Type. It really wants it to be

Content-Type: video/webm

for it to work. Not a problem if you control the server but in this case I don’t so I can’t fix the problem.

Conclusion

HTML5 video is nice but it certainly isn’t as nice as I hoped when I first started looking at it. But having to encode everything twice isn’t that bad so I guess I can live with the it

Enjoy!

www.TheProblemSolver.nl
www.dotnetevents.nl

HTML5, Google Chrome Frame and older browsers

Maurice — Thu, 08 Dec 2011 11:04:00 GMT

Consider the following problem:

You might be tempted to start working with HTML5 features in your web applications but you have to support older bowsers.

So for many HTML5 features there are polyfills available that will let you make older browsers like Internet Explorer 7 or 8 work with the newer API. See a possible list of HTML5 polyfills here. However a number of these is JavaScript based and while that works in older browsers their JavaScript engine is often quite slow as well making it hard to work with.

But how about just upgrading the complete browser?

Seems to make far more sense right? Except upgrading from IE8 to IE9 isn’t possible in all cases. One big showstopper can be people still running Windows XP because IE9 requires Windows VISTA as a minimum.

So we can upgrade to another browsers like FireFox or Chrome which has far better HTML5 support. While that technically works it causes headaches as it means people must switch browsers. And worse you might also have to support some site that only works well in IE forcing the users to switch between multiple browsers. Not a problem for techies, I do it all the time, but not much fun for the average end user.

So it turns out there is a great solution out there called Google Chrome Frame.

Users can install Google Chrome Frame in their machine and by default it does nothing noticeable. Only when a specific HTML meta tag X-UA-Compatible is added to the head section does the plugin start working. And then it intercepts the response and starts rendering it using Google Chrome Frame instead. However this is done inside the Internet Explorer window so the user has no clue he or she has just switched to Google Chrome Frame. And just like magic all the cool new HTML5 features supported in Chrome will work in what appears to be IE.

<meta http-equiv="X-UA-Compatible" content="chrome=1">

A simple example

When I try to new up a WebSocket object in IE9 I get the following error.

And with a simple addition of the HTML header the sample starts working. Notice that as far as the end user is concerned he is still using IE9, no changes there whatsoever.

Pretty cool right

And the good thing is that by default Google Chrome Frame is self updating just like Google Chrome so you know that once installed the plugin will always be up to date.

Detecting Google Chrome Frame

If you want to detect if Chrome Frame is installed ahead of time you can look at the User-Agent header the browser sends to the server. If installed and active Chrome Frame will add chromeframe/X.X.X.X where the X.X.X.X is the version number to the User-Agent string.

So why just add it to a single page?

Enabling Chrome Frame for al pages in a website is easy, just add the following to your web.config

<configuration>

  <system.webServer>

     <httpProtocol>

        <customHeaders>

           <add name="X-UA-Compatible" value="chrome=1" />

        </customHeaders>

     </httpProtocol>

  </system.webServer>

</configuration>

You can read the Google Chrome Frame FAQ with lots of extra bits of information here.

Enjoy!

www.TheProblemSolver.nl
www.dotnetevents.nl

#DotNed podcast: Bart De Smet over RX (Deel 1 van 2)

Maurice — Wed, 07 Dec 2011 12:12:53 GMT

Links:

Blog: http://community.bartdesmet.net/blogs/bart/Default.aspx
The Reactive Extensions (Rx): http://msdn.microsoft.com/en-us/data/gg577609
Channel9: http://channel9.msdn.com/tags/Rx/
101 Rx Samples: http://rxwiki.wikidot.com/101samples
Forum: http://social.msdn.microsoft.com/Forums/en-US/rx/threads

Enjoy!

www.TheProblemSolver.nl
www.dotnetevents.nl

HTML5 in een vogelvlucht

Maurice — Thu, 01 Dec 2011 11:07:00 GMT

De PowerPoint presentaties van mijn HTML 5 in een vogelvlucht sessie bij Achmea is hier te downloaden en de demo code hier. De presentatie is ook op SlideShare te vinden.

HTML 5 in een vogelvlucht (Dutch)

View more presentations from Maurice Beijer

Enjoy!