"A script on this page is causing Internet Explorer to run slowly" error solution

This is because some scripts may take an excessive amount of time to run, Internet Explorer prompts the user to decide whether they would like to continue running the slow script.

There are situations when a Web page contains script that takes an unusually long time to run. If you are scripting an ActiveX control on a Web page to transfer a very large file or do a large database query, this will often cause a significantly long delay.

This error could be fixed with a Microsoft Patch Update. Check out this Microsoft page for solution..
http://support.microsoft.com/kb/175500

JavaScript: console.log() - Best Practice

JavaScript developers, must be well aware of the console.log() function to log messages to the console window.

Today, I share my experience to write a wrapper function for console.log().

Simple Code 1: Ignore log message if the console object is missing


<script type="text/javascript" language="javascript">
    window.console = window.console || { log: function (d) {} };
    
    /* write your JavaScript code below this line */
    console.log("Message: Testing Console.log");

</script>


Simple Code 2: Modified to show log message as alert if the console object is missing and the global variable for debug is set to true. You can turn it off when you publish to production.


<script type="text/javascript" language="javascript">

    var debug = true;

    window.console = window.console || { log: function (d) 
        {if(debug){alert("Sorry! Logger not available on this 
            browser. \n\n" + d);} } };


    /* write your JavaScript code below this line */
    console.log("Message: Testing Console.log");

</script>


Simple Code 3: Same as above but with JQuery.


<script type="text/javascript" language="javascript">

    var debug = true;

    $(function(){
      window.console = window.console || { log: function (d) 
        {if(debug){alert("Sorry! Logger not available on this 
            browser. \n\n" + d);} } };
    });


    /* write your JavaScript code below this line */
    console.log("Message: Testing Console.log");

</script>

More Info:

This is a best practice to avoid errors with browsers that don't handle console.log missing object by default. For example, Internet Explorer don't handle the missing object and ignores all scripts following the error. Unfortunately, IE will not throw any error on this condition and eat your time debugging and tracing for the invisible error.

Note 1: console object is not a standard object in ECMA Script. However, it is one of the most widely used objects by developers for debugging JavaScript programs.

Note 2: In Internet Explorer 8 and Internet Explorer 9, console object is exposed only when Developer Tools (Shortcut - F12) are opened for the active tab.

Happy Coding!

Utilizing Public CDN for common scripts like JQuery

Are you in a dilemma to use public CDN or go with self-hosting for common scripts?

Take a quick and bold decision to go with public CDN. Using Public CDN is the best way to provide optimal experience to web users.

Some people think Google like enterprises don’t maintain servers as we do! Some time they are proven to be rite!!

Best practice to use Public CDN for common scripts

1. Always use minified version on production
2. First pull your script from the CDN
3. Check for the script availability
4. If script download fail, load script from your host

Example implementation:

Google CDN

<script
src=" http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" >  < /script>

<script >  

!window.jQuery && document.write(' < script src="js/jquery-1.7.1.min.js" > < \/script > ')

</script>

Other Popular Public CDN

MICROSOFT

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js

JQUERY

http://code.jquery.com/jquery-1.7.1.min.js

Do you want know why? Want to know what's under the hood? Never settle, go ahead and dig deeper, I am of your kind..

Why? What is the benefit of using a public CDN?

To understand this you need to know the basics of Internet and Browsers.

Let’s start with internet connection standards defined on HTTP 1.1 specification by W3C.

Browsers limit the number connections to the same domain irrespective of no. of tabs opened. Following are some findings from the internet for maximum number of connection limits.

Firefox 2.x       : 2
Firefox 3.x       : 6
IE 6/7               : 2
IE 8                  : 2 on dialup,
IE 8                  : 6 on broadband
Chrome            : 2
Safari               : 2
Opera 9.x         : 4

This is as per the HTTP 1.1 specification (which is currently live on 20^th March, 2012) in the RFC 2616 Section 8 (Connections) under 8.1.4 (Practical Considerations) in the last paragraph.

“Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy. A proxy SHOULD use up to 2*N connections to another server or proxy, where N is the number of simultaneously active users. These guidelines are intended to improve HTTP response times and avoid congestion.”

Link to RFC Document: http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html

So when you load a page, browsers make only specified no. of concurrent connections to the server to pull resources. So serving static content from different domain origin will save your domain quota on same domain origin. I’ll explain more on improving performance in a separate post.

The next big advantage of using public CDN is from the Browser behaviour / feature. Most browsers support strong cache mechanism to optimize network usage and improve user experience.

Caching is a mechanism to capture and store the recent or most commonly accessed static content in a small storage space. The storage space mentioned here is a browser cache in the client machine. It could probably be a temporary internet folder.

For example if an image or script file is downloaded from the internet it is preserved in a temporary internet folder with its origin for a span of time. The span could be determined by the headers. Defining headers go beyond the scope of this topic so we’ll discuss it in a different post. So when next time the same file is requested, it is available to the browser from the local machine cache instead of downloading from the server.

Assume, the user visited a site, say SiteA which use public CDN for JQuery script file. Now the user visits your site and we assume you use the same CDN for JQuery script file as the SiteA used. This time the JQuery will be available to the user from his local machine cache and it is instant. This makes your site work faster.

Let’s go back to Advantage of Internet. It is on CDN technology. CDN is an abbreviation for Content Delivery Network. You can treat this like a server backed by many number of servers from geographically diverse locations. When you seek a resource the server helps to serve it from the geographically closest server. For the any file copied to the host server will be replicated to servers inside the provider CDN all over the world. Basically if time of travel reduces speed of delivery increases.

Open a new browser window using javascript window.open() method

This article is to explain opening a new browser window using JavaScript. The window.open() function of JavaScript has been explained in detail with example code. For further help don't hesitate to contact me or our friends on the network. Just post your queries on the comment section.


Syntax:

winRef = window.open( URL, name [ , features [, replace ] ] )

Example:

mySearchWin = window.open('http://www.google.com','mysearchwindow',
'left=30,top=30,width=600,height=400,toolbar=0,resizable=0')

Returns:
Reference to the newly opened window.

The return value, stored in the variable winRef, is the reference to your new window. You can use this reference later, for example, to close this window (winRef.close()), give focus to the window (winRef.focus()) or perform other window manipulations.

The parameters URL, name, features, replace have the following meaning:

URL	String specifying the location of the Web page to be displayed in the new window. If you do not want to specify the location, pass an empty string as the URL (this may be the case when you are going to write some script-generated content to your new window).
name	String specifying the name of the new window. This name can be used in the same constructions as the frame name provided in the frame tag within a frameset name ...>. For example, you can use hyperlinks of the form name href="page.htm">, and the hyperlink destination page will be displayed in your new window. If a window with this name already exists, then window.open() will display the new content in that existing window, rather than creating a new one.
features	An optional string parameter specifying the features of the new window. The features string may contain one or more feature=value pairs separated by commas.
replace	An optional boolean parameter. If true, the new location will replace the current page in the browser's navigation history. Note that some browsers will simply ignore this parameter.

The following features are available in most browsers:

toolbar=0|1	Specifies whether to display the toolbar in the new window.
location=0|1	Specifies whether to display the address line in the new window.
directories=0|1	Specifies whether to display the Netscape directory buttons.
status=0|1	Specifies whether to display the browser status bar.
menubar=0|1	Specifies whether to display the browser menu bar.
scrollbars=0|1	Specifies whether the new window should have scrollbars.
resizable=0|1	Specifies whether the new window is resizable.
width=pixels	Specifies the width of the new window.
height=pixels	Specifies the height of the new window.
top=pixels	Specifies the Y coordinate of the top left corner of the new window. (Not supported in version 3 browsers.)
left=pixels	Specifies the X coordinate of the top left corner of the new window. (Not supported in version 3 browsers.)