Udooz!

Microsoft released Internet Explorer 8.0 a couple of days before.  When I installed RC1 months before, I had experienced some page crashes and degrade in performance and usability.  The most critical thing was loading “about:Tab” / “about:blank”.

The final release of IE 8.0 is impressed me lot not only for its performance and usability (of course, it is much faster than Chrome), its compliance with the industry standard and moving twoards the semantic web.  As a developer, it enables to write our web applications much standard way.  In addition to this, the IE 8.0 readiness toolkit enables to add new face to your web application.   From the compatibility perspective, it has three different rendering modes:

• Quirks – backward compatibility with IE 5.0
• IE 7.0 – backward compatibility IE 7.0
• IE 8.0 (standard mode) – the latest

Let us see the IE 8.0’s new features and standards from developer view point.

Web Standards

• Completely align with with CSS 2.1 Candidate Recommendation.  Visit http://msdn.microsoft.com/en-us/library/cc304082(VS.85).aspx for details.

CSS Expression has been deprecated in IE 8.0 (standard mode) due to its non-standard CSS extension and performane issue.  However, numerous non-CSS 2.1 properties are introduced with “-ms” prefix.  The filters also non-standard CSS, so they are now with “-ms” prefix.

• Data URI Support.  An attractive feature which already exists on competative browsers is now introduced in IE family.  With this, you can enclose a resource content (or binary data) directly in the URL.  For example, this will help you to avoid unnecessary roundtrip to the server to fetch image data for a <img> tag “src”.   Once downloaded, it can be cacheable. Code sample is:

<img src=data:image/gif;base64, XyVRKzw0CClkeqva…

• Improved Printing Support using CSS printing constructs.

AJAX now in HTML 5 Standard

• AJAX Travel Log. AJAX enables to update page content without submitting the page i.e page navigation.  The problem with this is that the browser navigability components (back, forward and address bar) are not getting updated which confuses the user to traverse through their travel log.  IE8 treats window.location.hash updates like navigations and saves the previous document URL.
• DOM Storage. Cookies are the only way to store bit and pieces of data on client machine today which is limited to 50 key-value pair per domain.  IE 8.0 implements W3C’s HTML 5.0 DOM storage, where you can store per-domain and per-session data as like as Silverlight’s Isolated Storage.  With DOM storage and the new window.navigator.onLine and online/offline events, you can make your application to work in offline mode.   See the following code:

var globalStorage = window.globalStorage["http://www.udooz.net"];

or

var sessionStorage = window.sessionStorage["http://www.udooz.net"];

// to check browser offline

if(!window.navigator.onLine) // do offline behavior

• XMLHttpRequest Enhancements.  The inventor of XMLHttpRequest object made some enhancements related to timeout in IE 8.0.  This makes better breath for pages with long running or polling type of asynchronous requests.
• Concurrent Connections.  Based on the internet connection type (narrow 0r broad band), IE 8.0 opens more concurrent connections (max: 6).  Developers can check this number and optimize their delivery.

Cross-domain Communication

• XDomainRequest. In the Web 2.0 era, mash-ups are very common and critically acclaimed in the enterprise world too.  The fundamental nature of mash-up is getting data from different servers (or services).  The current limitation is when you need data from another domain you have to send your request to your server.  Your server pass through the request to the respective domain and get the data.  To avoid these unnecessary (?) pass-through layer, IE 8.0 introduces XDomainRequest object, you can directly communicate cross-domains.  However, the permission should be granted by your web server using Response.AddHeader(“XDomainRequestAllowed”, “1″); 
• Cross Document Messaging (XDM).  Even though the XDomainRequest breaks the cross-domain barrier, still widgets with data supplied from different domain cannot interact with each other in a web page.  There are different workarounds for this.  Added to these, IE 8.0 provides “postMessage()” in window object as like:

window.postMessage(“Cross-domain communicated”, “http://www.msn.co.in”);

• toStaticHTML.  This new method filters potentially harmful HTML content.

Visit http://msdn.microsoft.com/en-au/ie/dd433173.aspx#AJAX for more details.

Native JSON Support

IE 8.0 uses douglas crockford’s JSON API, so that you can natively call JSON.stringfy() and JSON.parse() methods.

In addition these, there are so many other features which makes IE 8.0 more near to the semantic web arena.  I’ll cover those details in a separate post.

Interstingly, when I typed the term “microformats”, my hand confused and typed “Microsoft”. However, it took some period to adopt this standard by major web vendors Microsoft and Mozilla.

What is Microformats?
This is one way of enabling web as semantic. The current web markups are very keen on displaying content on the browsers. As an user we know what is on the page, as a system it just displays it. However, how can develop a system to organize, collect and manage the contents from web pages? Previously, it is impossible. There are millions of terra bytes of content exist in the web. But now, Semantic Web which was initiated by Tim Berner Lee helps us to make this possible.

Microformats are one such standard which reuse existing markup elements to convey semantic of the data. For example, the following snippet shows a hCard telephone contact details.

<span class=”tel”>
<span class=”type”>home</span>:
<span class=”value”>+91.044.111090190</span>
</span>

Oomph

Microsoft Oomph is a toolkit to for web developers, designers and users, making it easier to create, consume, and style Microformats. It comes up with:

• IE add-in to parse Microformats in web pages.
• Pre-defined CSS styles for Microformats.
• A cross-browser HTML overlay for Microformats aggregation.

Visit: http://oomph.codeplex.com/ to know more and download the toolkit.