Testing Internet Explorer on Linux and OS X

As web developer, I often think that world would be better if we could forget Internet Explorer, just because of its peculiar way to interpret the web standards. Moreover different Internet Explorer versions have usually quite different behavior.

Unfortunately, this is not always possible and I have to check my web applications on IE 7, IE8, IE9 and now also on IE 10.

Microsoft has created a support site dedicated to whom need to test web sites and applications with IE: www.modern.ie. The site offers several tools to help our compatibility checks.

Among them, I have found quite useful the pre-built virtual machines which allow us to run a specific Windows (from XP to 8) and a specific Internet Explorer (from 6 to 10) version inside a virtual machine.

On these machines, Windows is fully working (but with a 90 days time limit) and additional software can be installed (a JRE in my case).

If you a Linux or a OS X, this is very interesting solution to run IE on these boxes.

 

Depending on guest operating system, several virtual machines solutions are supported: VirtualBox, Parallel and VMWare.

How to define variables in Javascript

As in every language, also in Javascript there are several different ways to define variables and everybody is free to select the preferred approach. Nevertheless we should consider the following:

  • Javascript has some unusual rules on variables scoping
  • Code quality checkers like JSLint and JSHint prefer some specific solutions
  • Using a “standard” solution makes our code cleaner and more readable

The approach I use is quite standard and it can be summarized in few rules.

The basic rule is that all variables should be defined before their use. Javascript does not force us to define the variables before usage; if not defined, Javascript will create them on the fly.

Unfortunately this behavior let us to make errors like this:

activeList = true;
if (activList) {
alert("The list is active");
}

Inside the if the variable name is wrong; in the example Javascript will create a new variable with false as default value so the alert will never be invoked.

If possible, variables should be defined inside functions.

Global variables (defined in the same .js file but outside any function) should be used only if there are no alternatives. These kind of variables should be defined at the begon of the file and with a relevant comment.

External variables (defined in other .js files) should not be used (even if this is not always possible).

The var instruction should be the first in the function body

Example:

var gl = 1;  // global var
function myFunc () {
    var lc1 = 0,
        lc2 = 15,
        i;
    for (i = gl; i < 10; i += 1) {
        lc1 = lc1 + i;
    }
    ....
}

Notes:

  • gl is a global variable. It is defined and commented at the the begin of the file.
  • lc1, lc2 and i are all local variables, defined inside the myFunc function.
  • I have used only one var statement for all the local variables. This is also the preferred JSLint solution. It is also acceptable to use one var instruction for each variable. Here what it is important is to be coherent and to use the same solution among all project files.
  • For a similar reason I have defined the loop variable (i) together with the others. Alternative could be to define it inside the loop instruction (for (var i = gl; ….) but we should not forget that index variables have the same scope of the other function variables and they are not limited to the loop scope (like, for example, in Java)

 

Improving Web pages [1]

Many Web standards (HTML, CSS, Javascript) allow us to be very free in organizing the files internal structure and their relative position inside our web projects.

Unfortunately this freedom can create situations which are not only difficult to manage in the mid and long terms but also they may work worst than better organized equivalents.

There are few rules which we can follow to improve the quality and, at the same time, the performances of our projects.

The first simple rule is the following:

  • Keep Html in .htm / .html files
  • Keep CSS rules in .css files
  • Keep Javascript code in .js files

Or, in other words, do not embed CSS and Javascript inside HTML (as much as possible, of course).

This strategy creates files with clear meaning and contents.

There are several advantages:

  • Pages download is faster because browser can easily cache Javascript and CSS if they are on external (and stable) files. Caching is not possible if Javascript is inside the HTML page.
  • Development is easier thanks to the support of HTML editor and IDE like, for example, recent Netbeans 7.3.
  • Pages are easier to update, even by other programmer, because of clearer structure.

The internal structure of a HTML page could be like the following

<!DOCTYPE html>
<html>
<head>
    ....
    <link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
    .... contents....
    <script src="/js/script.js"></script>
</body>
</html>

In the code above, the CSS rules have been placed in the style.css which is in the css dir. The css dir will contain all our CSS files.

The CSS files should be included with a link tag inside the head tag. Note: the head tag usually contains other information not included in this fragment.

The Javascript code is inside the external script.js file which is in the js dir. The js dir will contains all our Javascript files. Please note that it is not necessary to specify the language or the type in the script tag.

Our project will often use Javascript and CSS files from third party libraries (like jQuery and Bootstrap). In this case it is useful to keep them in a separate dir like /ext/<name> where <name> is the name of the library. Inside it, the files position is usually defined by the library author.

The target is to keep our project structure clean and clear; the /ext contains everything which has not been created by us.

A final but very important remark: the script tag(s) in a page should be placed at the very end of the body tag. Not at body tag begin, nor inside head tag.

Reason is simple: let the browser download all HTML before start to work on Javascript code. The browser can start to create the DOM structure and render (= show to user) the page before executing Javascript code that, in most of the cases, is referring any way to elements in the page. Specifying the Javascript code at the begin of the page is simply delaying rendering phase without any benefit.