Hack Your Way with the F12 Developer Tools-Virtual TechDays 2011

Happy to say that I have presented at Microsoft Virtual TechDays 2011 in Developer's Track. It was a 3 day online technical event (Dec 14-16, 2011) with ~75 sessions from 84 Industry experts on Microsoft technologies.

My session is titled "Hack Your Way with the F12 Developer Tools". The developer tools that come with Internet Explorer 9 are a powerful aid to solving compatibility, network, script profiling, and performance issues; debugging code; managing HTML and CSS; editing on the fly and validating markup; and last but not least, inspecting HTML, CSS and JavaScript.

Presentation: Click here

Though I could not meet developers in person, I enjoyed presenting a demo filled session, which I hope would be useful for developers. Happy learning!

The why and how of "Document mode" and "Browser mode" in Internet Explorer

Web developers who are using IE9 might have already played with the new F12 developer tools and have seen "Browser mode" and "Document mode". For those of you who haven't explored, the  are the menu options which you can find in the developer tools of IE8/IE9 (hit F12 key and check). These are basically useful to test and make sure that your site runs well in various versions of IE.

IE9 modes

Web developers use browser and document modes frequently, yet not many know how these two differ and when to use what. e.g., If you are using ECMAScript 5 object model (which is supported in IE9) and want to have fallback options in lower versions, what would you use to test? Browser mode or Document mode? In the first place, why should there be two such options in the F12 tools and how did they evolve?

This post tries to answer the above questions and help web devs ease their exploration. Before looking at when to use these options, let us dig back into the sweet history and see how these modes evolved. I'm sure this would make the modern day (drag/drop day?) web developers understand their responsibility in building a web of standards!

Doctype, Quirks mode, Standard mode: 

The entire concept of different browsing modes originated in March 2000, when Internet Explorer-5 (IE5) for Mac was released. It was supposedly the most standard compliant browser at that time (better than IE5 for Windows). It was following standards so seriously that all the legacy, handcoded webpages of that time broke. Microsoft innovatively solved this issue by looking at "Doctype". Pages which had a valid doctype directive were rendered as per latest web standards by browsers (Standard Mode). Else, they were rendered as per the quirks/vendor specific implementations of late 90s (Qurik's Mode). This idea was implemented by most of the major browsers and it existed till date.  Hence evolved the "Standards Mode" and "Quirks Mode".

e.g., This is how XHTML1.0 Doctype looked like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
W3c has a very useful page on why you should follow web standards (make sure your manager reads this!)

With HTML5, the Doctype got over simplified!: <!DOCTYPE html>

The Doctype tells the browser about the version of markup used and instructs it what rules it should follow to render the content (e.g., ignoring deprecated tags, allow/disallow framesets etc).

So, the issue of distinguishing pages which follow standards from those which do not follow got resolved. However, browser specific quirks still existed, which would create a bigger problem.

User-agent string and Browser detection:

While some of the websites designed in early 2000 slowly adapted to doctype and standards mode, a majority of them targeted proprietary features and maintained different pages for IE and Netscape, for the same site. This is done using a technique called Browser Detection. As the name suggests, a web server can detect the browser used to send a HTTP request. This info is sniffed from a string in the HTTP header of a HTTP request, called the User-Agent.

E.g., The user-agent string for IE8 looks like:
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)

and the user agent for Firefox 5.0 looks like:
Mozilla/5.0 (Windows NT 6.1.1; rv:5.0) Gecko/20100101 Firefox/5.0

Since the user-agent string is sent in HTTP request, it can be queried on the server, e.g., in ASP.NET using C#, as:

String userAgent;
userAgent = Request.UserAgent;
if (userAgent.IndexOf("MSIE 6.0") > -1)
{
   // This browser is IE 6.0.
}

Even today, many websites use browser detection via user-agent not only for browser compatibility, but also for other reasons like preventing web crawlers from making expensive database calls, denying permission to very old browsers for security/business reasons etc.

Browser detection via user-agent string helped in distinguishing different browsers and handling their quirks. However, developers don't yet have a chance of saying that they are not ready to migrate to a newer version, or they want to target only a specific version of IE till they migrate.

Document Compatibility:

On one hand, while web developers followed web standards/browser specific tweaks, new versions of IE came in, fixing lot of existing bugs, introducing newer features and supporting several W3C standards. IE6 did not support the universal selector ('*'), while IE7 added this support. The standards mode of IE7 replaced the standards mode of IE6, which forced developers to migrate their sites to IE7 standards mode. This became a problem, since there is no way of targeting a specific version of IE, as they are unsure if a better standard in a newer version of browser might break their code.

When IE8 was released, it introduced the concept of document compatibility, which provides an option to developer to specify the version of IE that they intended to support. Taking into consideration the large userbase of IE and millions of web pages which already existed with version specific tweaks, this was a welcome change. Developers can specify the version they want to target via an X-UA-Compatible header in meta tag, like:

<head>
  <!-- Respects Doctype directive and renders in Internet Explorer 8 standards mode-->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
  <title>My webpage</title>
</head>

In JavaScript, the document mode can be found using: alert(document.documentMode);

The whole idea of compatibility mode is NOT to ask developers to target specific version. Instead, it is in support of "Don't break the web" clause. This way, developers can take time to follow proper web standards (without depending on version specific quirks) and migrate to latest browsers, without breaking their site.

How F12 Developer tools help:

Having understood the background so far, it is obvious that developers/businesses have a tough time in supporting rapidly evolving standards, meet the quirks of existing browsers without compromising on business functionality.

Browser mode: To test for different versions of IE, the "Browser mode" option in F12 tools can be used. It sets the user-agent string to the browser mode option which is chosen and sends HTTP request to the server (this is a full postback). The site then responds with an appropriate document type, based on the doctype and X-UA-Compatible header.

So, if you select IE8 browser mode, IE will present the page in a way which IE8 user experiences. Also, since the user-string is sent in HTTP request to the server, the browser detection code written in C# (as seen in the above section) works and all server side manipulations can be done.

Document mode: The document mode essentially decides the mode in which IE's rendering engine (Trident) should display the markup. In other words, changing the document mode in F12 tools will have exactly the same effect as specifying your own X-UA-Compatible header in your web page. The main difference from browser mode is, when document mode is changed, there will NOT be a fresh request to the server and hence the user-agent string will NOT be sent. Its only that the rendering engine displays content according to your choice.

Bonus: The F12 tools also provide an option to test your site in different browsers. Harish Ranganathan wrote a recent blog post on changing user agents.

Few tips:

(1) Use <!DOCTYPE html> directive as a standard for your web pages. It is backward compatible and also makes your site HTML5 enabled.

(2) Do not use browser detection. Use feature detection instead.

(3) Use X-UA-Compatible header only till you make your site standards compliant. Get rid of it at the earliest so that your site can scale along with modern standards/browsers.

(4) Use libraries like Modernizr for feature detection, instead of borrowing buggy JS code from the internet.

References worth reading:

(1) Why IE5/Mac matters-AlistApart

(2) IE8 Document & Browser mode-Nicholas Zakas

(3) Testing sites with Browser mode vs Document mode-IE Blog

(4) Understanding User-Agents-IE Blog

ECMAScript 5 'Strict mode' support in browsers. What does this mean?

If you are closely following how the web is shaping up lately, you would be thrilled, like me, looking at pace at which things are changing. There are hundreds of things happening on the new HTML5, CSS3, JavaScript front, frequently releasing browser versions and contest for speed, supporting modern standards etc. One such innovations is ECMAScript 5 Strict Mode support in modern browsers. Recently, IE10 platform preview 1 announced 'strict mode' support in Mix 2011 conference . The goal of this article is to explain what 'Strict Mode' support in modern browsers mean and how developers can take advantage of it.

 

I am aware of JavaScript. But what is ECMAScript 5?

Similar to W3C which standardizes HTML specifications, ECMA is the body which standardizes JavaScript. ECMA-262 is the specification which defines the JavaScript language, interchangeably referred as Jscript/ECMAScript. The JavaScript code which we web developers have been using since a decade is as per the guidelines defined in the Third edition ofECMAScript (ES3 in short) released in December,1999.

 

ES3 was released in a hurry and it had several loopholes, which means that the future versions have to be built on top of these loopholes to support older pages (I strongly recommend reading grandpa Crockford's book, JavaScript- The Good Parts to know the good and bad parts of the language). ECMAScript 4 had several ambitious, drastic changes in its specs but was never released due to conflicts regarding backward compatibility, fearing a broken web. So,ECMAScript 5 (ES5 in short) was released in December 2009, more as a transitional version of the specification, adding few cool features, without much changes in the syntax (Check the ECMAScript specs archive).

 

Few new features in ES5:

ECMAScript 5 includes few new APIs, computational methods for things which can already be done in ES3. One of the most interesting features is the newer object model in ES5, using which, newer objects can be created easily and their extensibility can be controlled. Similar to higher programming languages like Java or C#, JavaScript objects now have getters and setters, non-enumerable methods, sealed and frozen objects  etc. ES5 also describes native JSON support, which includes methods like JSON.parse() and JSON.stringify() which remove dependency on external libraries for working with JSON.

 

Each browser has its specific implementation of ES5, as per its JS engine. ES5 support in IE 9 is different from ES5 support in FF 4.

 

ES5 Strict mode:

'Strict mode' is an innovative feature of ES5. It is a restrictive variant of ES5 implementation, which follows a slightly different semantics from the normal JavaScript. Someof the deprecated, bad parts of JavaScript in ES3 specification are disabled or thrown as exceptions in 'strict mode'. It is not backward compatible with older browsers and has to be opted-in by the developer.

To enable ES5 in strict mode, just use the string "use strict" as the first line of your JavaScript code. This will make the entire program to run in strict mode.

 

Alternately, you can place "use strict" in a function, to restrict only to that context.

 

function isStrictMode(){

return !this;

} 

//returns false, since 'this' refers to global object and '!this' becomes false

 

function isStrictMode(){   

"use strict";

return !this;

} 

//returns true, since in strict mode, the keyword 'this' does not refer to global object, unlike traditional JS. So here,'this' is null and '!this' becomes true.

 

I hope to cover detailed demos on this in the following posts.

 

The good parts of  ES5 Strict Mode:

In JavaScript, if a variable is not explicitly declared, it is implicitly assigned global scope.This may look fun to code in JS, but is a nightmare to maintain in huge projects. Strict mode throws error if variables are assigned values without declaring and hence implicit global variables will not be created. This is a huge win for the language as well as for huge projects.

 

Few such good changes in strict mode are: Assignment to a read-only property will throw error, object literals having 2 or more properties with same name will throw error, functions having 2 arguments with same name will throw error etc. All these changes will help in making the code more reliable, readable and manageable.

 

The IE team launched  a 'Strict Mode' demo in their IE Test Drive HTLM5 demos. You can check if your browser supports ES5 Strict mode or not by checking the "Try Strict Mode" demo. Download IE10 platform preview 1 if you haven't and start playing with it!

 

P.S: Happy to share that Microsoft has recognized my community contributions and awarded me "Microsoft MVP award" for the second consecutive year. In 2010, it was under ASP.NET/jQuery category and now for 2011, it is under "InternetExplorer" category. Thanks to Microsoft for the encouragement Smile

Why web devs should get excited about IE9!

A more beautiful web was launched few days back! After several platform previews, beta build, release candidate build, community feedback and rigorous testing, the final (RTM) version of Internet Explorer-9 has hit the market. On the first day of its release (Mar 14, 2011) itself IE9 saw 2.35 million downloads, which is 27 downloads/second! If you aren't one among them, you should download IE9 RIGHT NOW from here: www.beautyoftheweb.com (Yes, it is an official, trusted site by Microsoft).

Before going any further, let me confess something. I'm a web developer enjoying modern web technologies. I use IE, Chrome, Firefox, Opera, Safari interchangeably. I used hacks to support older browsers. I want HTML5, CSS/JS support, good debugging tools, cross browser compatibility. I want the web to win, like many of you and hence want to share my excitement about IE9, which I call as a win for the web :)

If you are a newbie to IE9, you can check the top features of IE9. Since there are several resources on the features, I want to concentrate on why web devs should get excited about IE9.

As a web dev, whether you love it or hate it, you need to support all browsers. In most of the cases, IT enterprises and their clients are Microsoft shops and will prefer IE+Windows over any other combination. You may be a Firebug geek (check IE9 developer tools), but your client doesn’t bother about it. He needs his site to work flawlessly in IE primarily and of course support the rest. (This is a well known fact which does not need proofs). With rest of the browsers updating quickly, IE was a little behind the race w.r.t supporting newer web standards. "Better late than never", as the saying goes, IE9 comes as a great boon by supporting most of the modern web standards, easing developer's life. So even if you are a firefox/chrome power user, being a web dev, you need to respect IE9.  I'm sure you would love it if the 'critic' mask is removed.  Now comes the below question.

Is IE9 the most 'modern' browser on earth w.r.t web standards?

The answer to this debatable question depends on your definition of the term 'modern'. If implementing web standards drafted by W3C just a couple of minutes back is what you call 'modern', then IE9 is NOT.  If providing 'site-ready' HTML5/CSS3/JS support which developers and consumers can rely without fear is what you call 'modern', then yes, IE9 is the most modern browser :)

Did you know?

Microsoft started something called HTML5 Labs, where it prototypes early, unstable web standards and features proposed by standards bodies like W3C (Web Sockets, IndexedDB etc.). It offers prototypal implementations for unfinished parts of HTML5 which interested developers can try, but consumers can’t yet rely on.

By clearly separating prototype implementations from main stream browser product, many negative consequences can be avoided.  Implementing latest standards in a rush and rolling them back (e.g., Chrome H.264, Google gears etc) for whatever reason is only a pain for web devs. IE team knows what it's competitors already have but is waiting for stability of standards, so that developers can have peaceful time.

What's hot now?

IE9 now supports WebM video format via WebM components for IE9. You should check this article for further details, where Dean Hachamovitch, Corporate Vice President of Internet Explorer, makes a truly valid point by saying "The people who build and use the Web deserve practical and consistent video support rather than ideology."

Resources from my friends, which you should check:

  * Article on few FAQs (myths?) about IE9  by  Harish Ranganathan, Microsoft India

  * Article on History of Internet Explorer from IE to IE9 by Kunal Chowdhury, Microsoft MVP

So, it's time for web devs to rejoice and play with modern (and stable) web standards, widening creative and technical horizons. Keep checking the official IE blog for more updates. Enjoy the beauty of the web :)

NOTEMicrosoft TechEd 2011 is just a few days away. If you are unable to make to it, you may watch TechEd 2011 LIVE and watch the sessions, industry trends for FREE. Dont Miss It!! I'm attending in person. See you there! :)