Gil Fink's Blog : IE9

Keep Users Coming Back With Desktop Notifications for Web Apps Article

Gil Fink — Fri, 09 Dec 2011 20:11:13 GMT

Keep Users Coming Back With Desktop Notifications for Web Apps Article

A few days ago, an article I wrote for DZone web site was published in their HTML5 Microzone. The article is called “Keep Users Coming Back With Desktop Notifications for Web Apps” and it discusses desktop notifications and in particular IE9 Pinned Sites and HTML5 Notification API.
You can read the article here.

Enjoy!

Profiling JavaScript 101 Using IE9 Developer Tools

Gil Fink — Mon, 15 Aug 2011 15:37:00 GMT

Profiling JavaScript 101 Using IE9 Developer Tools

Lately I’m involved in a very interesting project which suffer from JavaScript performance issues in old browsers. The main “pain” in the project is the need to support IE8 which is used by many of the client’s users. I’ve got a call to come and help in the process of tuning the application and decided to share some tips of how I profiled the application and found some of the bottlenecks in the application JavaScript execution. Those bottlenecks were handled by the development team very fast and the application’s execution is becoming much better. Since the main problems were mainly in IE8 then I used IE Developer Tools in the process and not FireBug.

Starting a Profiling Session

The first thing that you’ll want to do when you profile JavaScript is to setup your environment. First open the relevant web page in IE and press F12 in order to open the IE Developer Tools. In the developer tools, change the Browser Mode and Document Mode to IE8 and IE8 standards respectfully like in this figure:

Now open the Profiler tab and press the Start profiling button to enable profiling:

Then, press F5 to refresh the page and after the page finish to run press the Stop profiling and get the profiling report.

Reading the Profiling Report

When you have the report here are things that you need to pay attention while figuring out the information you got:

Count – when the count of function calls is very big (for example the amount of RegExp.exec in the figure) that might indicate that you have a problem. Combining the count with the Exclusive time might help to find bugs in the JavaScript use.

At the client there were a lot of calls to jQuery’s CLASS method. After figuring this out and seeing that the Exclusive execution time was very high I debugged the CLASS method and got the stack call to figure that there was a bug in an application function. Fixing the function helped to improve performance.

There are times that you will find that there are functions that got call in very similar numbers. This might indicate that they were called inside the same function. This is very inaccurate measurement but it might help sometimes.
Inclusive time – this is the execution time of a method and all of its children. Here you’ll find the methods that executed for very long time. This measurement can help to figure out bottlenecks.

At the client we found out that Telerik’s RadGrid control and its inner LoadSod function are one of the bottlenecks in the application. I’m not saying here that the control has bad performance (on the contrary the control is fast) but only that in the application the control is one of the bottlenecks. I found a way to improve a little the control’s performance but the improvement was very negligible (50 milliseconds) so we dropped it.
Exclusive time – this is the amount of time that is spent in the function itself. Here you can track very long running functions and then debug them to understand why the run for so long.

At the client we found a bug in one of the functions that was called with setTimeout very often and damaged the performance of the application.

Another way to use the report is the Call tree report that pack all the execution of functions in a tree view:

Here you can drill down the execution stack and figure out using the previous measurements how the application operate.

Tip: pressing double click on a function line in the report can take you to the JavaScript source file (if exists). Then you can set a break point and debug the function call.

Summary

Profiling JavaScript isn’t as simple as it sound. Using profiling tools like in IE Devloper Tools (which I used because IE8 was giving hard times to the client) or FireBug can help to simplify this matter a lot. Knowing how to read the reports will probably help to fine tuned the code you wrote.

MSDN Session: Internet Explorer 9 & HTML5 Videos

Gil Fink — Wed, 13 Apr 2011 09:27:00 GMT

MSDN Session: Internet Explorer 9 & HTML5 Videos

On March 30th I had a MSDN session about IE9 and HTML5. The session was recorded and can be viewed (in Hebrew) in two parts:

Part 1 - available for watching in Channel9
Part 2 - available for watching in Channel9

Enjoy!

IE9 and HTML5 Session Slide Deck and Demos

Gil Fink — Wed, 30 Mar 2011 18:31:09 GMT

IE9 and HTML5 Session Slide Deck and Demos

Today I had the pleasure to deliver a MSDN session about IE9 and HTML5 at Microsoft Ra’anana.
First of all I want to thank all the attendees who came to hear the session.
In the session I talked about IE9, Feature Detection and Modernizr, CSS3, HTML5 and more. The session was recorded and will be available soon on the internet (in Hebrew). You can download the session’s slide deck and demos from here.

Enjoy!

Feature Detection for Better Compatibility in Web Development

Gil Fink — Fri, 05 Nov 2010 19:52:18 GMT

Feature Detection for Better Compatibility in Web Development

One of the things I talked about in the session I had about what’s new in IE9 for web developers was how to make your web site/application more compatible. In this post I’ll try to give the highlights from the session.

Same Markup

When we develop web sites/applications we need to strive to use features that give us the same markup in every browser. When we know about a feature that is compatible in every browser we can use it without any fear that it will break our layout. For example using most of the Html elements such as input element for example will look the same in every browser. On the other hand, using the new HTML5 video element isn’t supported currently by most of the browsers.

Browser Detection

In the old days when we wanted to make our site compatible to every browser we used to detect the browser and then apply the relevant style/features/javascript in order to create our site appearance and behavior. This detection was made on the false assumption that we know how the next versions of the browser will work. A wrong assumption like that could break the site when new versions of the browser were released. This way of thinking is slowly disappearing and being replaced with a better method – feature detection. The only place that you should use this method is to make assumptions about older browser versions. The following code shows such assumption:

       // Target legacy only

      <!--[if IE lte 7]>

          // Legacy browser-specific code

      <[endif]—>

In the example we check that we are in legacy IE such as IE6 and the apply some legacy browser specific code.

Feature Detection

The feature detection is a good method to use in your site when you want to make sure that your site compatible to most web browsers. In this method you look to see whether a specific object, method, property, or behavior exists in the browser. If you detect standards first it will ensure you're getting your best experience in newer browsers (which will probably support the standards). Also, standardized features tend to be more stable and more interoperable across most of the browsers. So how does it work? the following example can show you a way to use feature detection:

      if( window.addEventListener )

      {

          // Code for browsers with addEventListener

      }

      else

      {

          // Code for browsers without addEventListener

      }

This check will pass in IE9 that has implementation for addEventListner but in IE8 and lower versions of IE it will go to the else statement and probably you’ll use the attachEvent method. The feature detection method is widely used in javascript frameworks like jQuery.

Summary

When you want to make your site compatible with browsers you should look first for features that all the browsers give you the same markup. If you target legacy browsers you can use the browser detection method. Otherwise use the feature detection method. Also, remember to test for standards first in order to give the best experience to your users.

IE9 for Web Developers Slide Deck and Demos

Gil Fink — Fri, 05 Nov 2010 18:13:00 GMT

IE9 for Web Developers Slide Deck and Demos

Yesterday I had a session about what’s new in Internet Explorer 9 for web developers at Microsoft office, Ra’anana. I want to thank all of the attendees who came to hear the session about the new Microsoft browser. The agenda for the session was:

Introduction
Focus on sites
Same markup
All around fast

You can download the slide deck and demos from here. Pay attention that I removed the video and audio files that I used for the demos about HTML5 video and audio elements.

Enjoy!

P.S – The same session is going to be delivered by Shlomo and me at Sela office at the 22 of December. It’s a free session that you can register from here.

IE9 for Web Developers Session

Gil Fink — Wed, 27 Oct 2010 12:34:56 GMT

IE9 for Web Developers Session

Next Thursday (4.11) I’m having a session about Internet Explorer 9 for web developers. The session will take place at Microsoft Ra’anana between 08:30 and 13:00 and it is free. In the session I’m going to present IE9 (which is currently in its beta version) and talk about the main issues that every web developer will need to know when he or she is programming web sites and web applications. If you like to hear this session you can still register the event from this link.

Hope to see you there.

Using Overlay Icon API to Make Client Notifications in IE9

Gil Fink — Mon, 11 Oct 2010 12:03:36 GMT

Using Overlay Icon API to Make Client Notifications in IE9

Ever wanted to notify your site clients/users while they are surfing in your site. In one of the applications that I helped to build this was a customer requirement. So in the past you could have implemented a blinking behavior that will make the icon of the browser blinking. Not a very user friendly behavior for my taste. With IE9 you now able to use the new SiteMode Overlay Icon javascript behavior which is part of the site pinning feature.

Overlay Icon API

The Overlay Icon API include two simple methods:

msSiteModeSetIconOverlay – the method enables to communicate alerts, notifications and statuses to the site users by adding an icon on top of the the existing web site icon. The method takes two parameters – an image url and a tooltip value.
msSiteModeClearIconOverlay – the method clears any existing overlay icon.

Pay attention that this behavior will only work in a pinned site so check whether the site is in SiteMode before using these methods.

Overlay Icon In Action

When the following page is loaded in a pinned site the result will be an overlay icon on top of the pinned site icon:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head runat="server">

        <title>My application</title>

        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

        <meta name="application-name" content="My Application" />

        <meta name="msapplication-tooltip" content="My Application" />

        <meta name="msapplication-starturl" content="./" />

        <meta name="msapplication-task" content="name=My Blog;action-uri=http://blogs.microsoft.co.il/blogs/gilf;icon-uri=/favicon.ico" />

        <meta name="msapplication-task" content="name=My Linkedin Profile;action-uri=http://il.linkedin.com/in/gilfink;icon-uri=http://www.linkedin.com/favicon.ico" />

        <script type="text/javascript">

            window.external.msSiteModeSetIconOverlay('/info.ico', 'Attention Needed');

        </script>

    </head>

    <body>

        <form>

        <div class="page">

            <div class="header">

                <div class="title">

                    <h1>

                        My ASP.NET Application

                    </h1>

                </div>

                <div class="loginDisplay">

                    <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">

                        <AnonymousTemplate>

                            [ <a href="~/Account/Login.aspx" id="HeadLoginStatus" runat="server">Log In</a>

                            ]

                        </AnonymousTemplate>

                        <LoggedInTemplate>

                            Welcome <span class="bold">

                                <asp:LoginName ID="HeadLoginName" runat="server" />

                            </span>! [

                            <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out"

                                LogoutPageUrl="~/" />

                            ]

                        </LoggedInTemplate>

                    </asp:LoginView>

                </div>

                <div class="clear hideSkiplink">

                    <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"

                        IncludeStyleBlock="false" Orientation="Horizontal">

                        <Items>

                            <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />

                            <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />

                            <asp:MenuItem NavigateUrl="~/IconOverlay.aspx" Text="Icon Overlay" />

                            <asp:MenuItem NavigateUrl="~/msPerformance.aspx" Text="msPerformance" />

                        </Items>

                    </asp:Menu>

                </div>

            </div>

            <div class="main">

                <input type="button" value="Remove Icon Overlay" onclick="window.external.msSiteModeClearIconOverlay();" />

            </div>

            <div class="clear">

            </div>

        </div>

        <div class="footer">

        </div>

        </form>

    </body>

    </html>

The result of running this code can look like:

The full page can look like:

and when pressing the Remove Overlay Icon button it will remove the added information icon.

Summary

IE9 brings a new way to notify users about things that happen in web sites/applications. Using the simple but powerful overlay icon API in pinned sites can make your web site/application more user friendly and more shiny.

Using Javascript to Measure Web Page Performance with IE9

Gil Fink — Tue, 05 Oct 2010 19:55:00 GMT

Using Javascript to Measure Web Page Performance with IE9

One ability that currently available in IE9 is the new msPerformance javascript object that enables developers to measure real-world performance of websites. In this post I’ll explain what is msPerformance and how you can use it to measure web page performance.

The msPerformance Object

Wanting a web application that performs great is a very regular and crucial demand in these days. With IE9 beta developers have a new set of javascript profiling API integrated at the DOM’s core – msPerformance object. The msPerformance captures key timing information about the load of the root document and also network activity that occurs on the page. This data is available from the DOM after the page was loaded. Using these metrics the developer is able to measure where the browser is spending it’s time during the run of the web application. This of course enables performance tuning when the developer finds bottlenecks or other problems.

How to Use msPerformance?

The msPerformance which is located under the window DOM object exposes three properties:

navigation – a reference to MSPerformanceNavigation object, which holds navigation data.
timing – a reference to MSPerformanceTiming object, which holds timing data.
timingMeasures – a reference to MSPerformanceTimingMeasures object, which holds timing measures.

Those objects hold a lot of properties and information about the performance of the web page that is currently running. The following code example shows how to fill a table with some web page performance measurements:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="msPerformance.aspx.cs"    Inherits="WebApplication5.msPerformance" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title>msPerformance Example</title>    <script type="text/javascript">   1:     2:         function InsertPerformanceData() {   3:             if (window.msPerformance != null) {   4:                 var w = window;   5:                 var navStart = w.msPerformance.timing.navigationStart + "ms";   6:                 var navStartTime = Date(w.msPerformance.timing.navigationStart);   7:     8:                 var loadEnd = w.msPerformance.timing.loadEventEnd + "ms";   9:                 var loadEndTime = Date(w.msPerformance.timing.loadEventEnd);  10:    11:                 var navigation = w.msPerformance.timingMeasures.navigation + "ms";  12:    13:                 var runtime = (w.msPerformance.timing.loadEventEnd - w.msPerformance.timing.navigationStart) + "ms";  14:    15:                 document.getElementById("ticksNavigationStart").innerText = navStart;  16:                 document.getElementById("timeNavigationStart").innerText = navStartTime;  17:    18:                 document.getElementById("ticksLoadEnd").innerText = loadEnd;  19:                 document.getElementById("timeLoadEnd").innerText = loadEndTime;  20:    21:                 document.getElementById("timeNavigation").innerText = navigation;  22:    23:                 document.getElementById("timeRuntime").innerText = runtime;  24:             }  25:         }          26:     </script></head><body>    <form id="form1" runat="server">    <div>        <table>            <tr>                <th>                    Event                </th>                <th>                    API                </th>                <th>                    TICKS                </th>                <th>                    TIME                </th>            </tr>            <tr>                <td>                    Navigation Start                </td>                <td>                    window.msPerformance.timing.navigationStart                </td>                <td id="ticksNavigationStart">                </td>                <td id="timeNavigationStart">                </td>            </tr>            <tr>                <td>                    Load End                </td>                <td>                    window.msPerformance.timing.loadEnd                </td>                <td id="ticksLoadEnd">                </td>                <td id="timeLoadEnd">                </td>            </tr>            <tr>                <td>                    Run Time                </td>                <td>                    window.msPerformance.timingMeasures.navigation                </td>                <td>                </td>                <td id="timeNavigation">                </td>            </tr>            <tr>                <td>                    Run Time                </td>                <td>                    timing.loadEnd - timing.navigationStart                </td>                <td>                </td>                <td id="timeRuntime">                </td>            </tr>        </table>        <input type="button" onclick="InsertPerformanceData();" value="Show Performance Data" />    </div>    </form></body></html>

In this simple page when the button is clicked I first check that the windows.msPerformance exists. Then I pull out some performance data and show it to the user. After pushing the button an example of the table that can be generated could be:

Pay attention that the performance data is available only after the page was loaded!

Summary

IE9 includes a lot of features that can help developers in their daily activities. One of the these features is the new msPerformance javascript object which can help developers with their web pages performance tuning. Currently, this feature isn’t interoperable with other browsers so don’t try to use it outside IE9.

Adding Tasks and Jumplists to Pinned Sites in IE9

Gil Fink — Wed, 22 Sep 2010 22:02:25 GMT

Adding Tasks and Jumplists to Pinned Sites in IE9

In a previous post I explained what is site pinning and how you can pin a site to Windows 7 taskbar. In this post I’m going to explain how to add tasks and jumplists to the pinned site from the previous post example.

Adding Tasks to a Pinned Site

When we pin a site to the Windows 7 taskbar we can include tasks to operate on the pinned site. With this feature you can add tasks for common behavior of your site. For example, in a library site you can add a task to redirect to the last borrowed book page to help the user or a task for seeing the list of books available in the library.
So how do I achieve the tasks behavior? this is easy – use the new meta tag msapplication-task at the head of the web page. The msapplication-task has a content format of three parameters:

name – the name of the task.
action-uri – the link to perform when that task is clicked.
icon-uri – the link for the icon to show beside the task.

This is an example of a task that redirect to my blog you can see the content format which expect the parameters to be comma delimited:

     <meta name="msapplication-task" content="name=My Blog;action-uri=http://blogs.microsoft.co.il/blogs/gilf;icon-uri=/favicon.ico" />
  

Here is the new head of the previous post example which include two new tasks:

    <head runat="server">

        <title>My application</title>

        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />    

        <meta name="application-name" content="My Application" />

        <meta name="msapplication-tooltip" content="My Application" />

        <meta name="msapplication-starturl" content="./" />

        <meta name="msapplication-task" content="name=My Blog;action-uri=http://blogs.microsoft.co.il/blogs/gilf;icon-uri=/favicon.ico" />

        <meta name="msapplication-task" content="name=My Linkedin Profile;action-uri=http://il.linkedin.com/in/gilfink;icon-uri=http://www.linkedin.com/favicon.ico" />

    </head>

Here is how it will be shown after the site pinning:

Adding Jumplist to a Pinned Site

When we want to add Jumplist functionality to the pinned site we should be familiar with the Jumplist API that is available in IE9. This API enables the creation, update, show and clear of a Jumplist. This API includes four Javascript methods:

msSiteModeCreateJumplist – creates a new Jumplist.
msSiteModeAddJumplistItem – adds an item to the Jumplist.
msSiteModeShowJumplist – shows the created Jumplist.
msSiteModeClearJumplist – clears the Jumplist.

Here is an example for a function that creates a simple Jumplist with one item:

    <script type="text/JavaScript">

        function AddJumpList() {

            window.external.msSiteModeCreateJumplist('My Favorite Sites');

            window.external.msSiteModeAddJumpListItem('About Page', '/About.aspx', '/favicon.ico');

            window.external.msSiteModeShowJumplist();

        }

    </script>

In the example I’ve put this function in the head of the application master page (of course it should be a part of an external js file):

    <head runat="server">

        <title>My application</title>

        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />    

        <meta name="application-name" content="My Application" />

        <meta name="msapplication-tooltip" content="My Application" />

        <meta name="msapplication-starturl" content="./" />

        <meta name="msapplication-task" content="name=My Blog;action-uri=http://blogs.microsoft.co.il/blogs/gilf;icon-uri=/favicon.ico" />

        <meta name="msapplication-task" content="name=My Linkedin Profile;action-uri=http://il.linkedin.com/in/gilfink;icon-uri=http://www.linkedin.com/favicon.ico" />

        <script type="text/JavaScript">

            function AddJumpList() {

                window.external.msSiteModeCreateJumplist('My Favorite Sites');

                window.external.msSiteModeAddJumpListItem('About Page', '/About.aspx', '/favicon.ico');

                window.external.msSiteModeShowJumplist();

            }

        </script>

        <asp:ContentPlaceHolder ID="HeadContent" runat="server">

        </asp:ContentPlaceHolder>

    </head>

In the home web page of the application I added this script which uses the msIsSiteMode to check whether the site is pinned and if so call the AddJumpList function from the previous master page example:

    <script type="text/javascript">

        if (window.external.msIsSiteMode()) {

            AddJumpList();

        }

    </script>

Here is the pinned site with the added Jumplist:

Summary

In the post I showed how you can add tasks and Jumplists to your web application using simple things like meta tags and Javascript functions. This ability adds to the user experience with IE9 were very common tasks or operations can be exposed as part of the Windows taskbar.

IE9 Site Pinning

Gil Fink — Sun, 19 Sep 2010 13:45:23 GMT

IE9 Site Pinning

One of the new features that will come with IE9 is the pinned sites ability. In this post I’m going to explain what is site pinning and show an example for how to do this stuff. If you want to read about this new feature in Hebrew you can read my Newsgeek article.

Site Pinning

IE9 Beta was released last week with a lot of browser improvements and features. One of the new features it includes is site pinning. In this feature we can drag a tab from the browser and pin it to the windows taskbar.
I’ve build a simple site to demonstrate how to do that:

This is the template that you get when you create a new web application in VS2010.

Lets pin the site. First drag it:

Then pin it to the taskbar:

Then it is pinned:

Now you can run the site from the taskbar:

Pay attention that the favicon of the pinned site is located left to the back button of the browser. Also the buttons are colored in brown to resemble the icon itself. This is part of the feature and you can change the colors if you like.

How to Enable Site Pinning?

This is the easy part.
You don’t have to anything.
If you have Windows 7 then install IE9 and you can start pinning. It is very recommended to add some meta tags like application-name to the site in order to add some information about your site. Here is an example of how to add the tags to a master page head element:

     <head>

        <title>My application</title>

        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />    

        <meta name="application-name" content="My Application" />

        <meta name="msapplication-tooltip" content="My Application" />

        <meta name="msapplication-starturl" content="./" />

    </head>

Summary

The ability to pin sites to the taskbar is a very nice feature of IE9. It shows that there is a shift in Microsoft direction in regard to the web and web operations systems. Think about it, when you pin sites you are pinning web applications/sites as you do with desktop applications. In a following post I’ll explain how to create jump lists for the pinned site.

IE9 Beta is Out

Gil Fink — Wed, 15 Sep 2010 23:40:00 GMT

IE9 Beta is Out

Internet Explorer 9 beta was released a few minutes ago.
If you want to try it out you can go to this link and download it.
IE9 is going to include a lot of changes in compare to the previous versions of IE. The main issues and changes that it includes are in performance (new Javascript engine called Chakra for example), in standards compatibility (CSS3, HTML5 ECMAScrpit 5 and more) and of course a new clean UI.
Here is a screen shot of the new IE9 beta which include very minimal and clean UI and this blogging system:

This new release brings us closer to the RTM release of IE9 which will increase the browser wars that will probably end with no winners but with better browsers.