Jonathan Weiß

After the last "update" of IE 7 and the questionable communication policy in the IEBlog I am very happy to see that things can change. :-)
Thanks, Mr. Gates for bringing light into the darkness.

Anyway, how can IE 8 render the test correctly? At this moment the test is broken...
Ok, I have just seen their video and I guess they were working with the correct Acid2 test.

A few weeks ago I had one of the seldom moments in which I had to use Internet Explorer 6. I examined some memory usage oddities in connection with the AlphaImageLoader object when I noticed a strange rendering behavior regarding the proprietary CSS attribute filter. I just added a simple filter like

<span style="filter:Alpha(opacity=100, style=0)"></span>

and my text just looked blurry.

Text with ClearType enabled

Text without ClearType

The text appears blurry only if ClearType is enabled.

Did your noticed this behavior by yourself? If you have any experiences with the attribute filter in connection with ClearType, please let me know!

JavaScript has the nice ability to stop evaluating expressions in a condition as soon as the condition result is final.

function test(){
  alert("this message will never be shown!");
  return true;
}
 
if( true || test() ){
  // ..
}
 
if( false && test() ){
 // ..
}

Since expressions are evaluated from left to right we have the following possibilities to optimize the expression order:

1. align less complex expressions left
2. for disjunctions: put the expression which will most likely be true to the left
3. for conjunctions: put the expression which will most likely be false to the left
4. group depending expressions

Of course the rules also apply to nested expressions.

This example

if(
  (
    (complexCalculation() < 42) &&
    (
      (userAgentVersion < 7) &&
      activexDisabled() &&
      (getUserAgent() == "Internet Explorer")
    )
  ) || (
    (value > 0)
  )
){
 // ..
}

can be optimized to

if(
  (value > 0) || (
    (
      (getUserAgent() == "Internet Explorer") &&
      (userAgentVersion < 7) &&
      activexDisabled()
    ) &&
    (complexCalculation() < 42)
  )
){
 // ..
}

Let us assume, that you wrote some code to extend the Array class to a method. In this case we will add the min() method, which will return the lowest numeric value of all elements inside the array:

Array.prototype.min = function min(){
 
  var returnValue = Number.MAX_VALUE;
 
  if(this.length === 0){
    return false;
  }
 
  for(var i = 0; i < this.length; i++){
    if(this[i] < returnValue){
      returnValue = this[i];
    }
  }
 
  return returnValue;
 
};

This methods work fine, but you will notice a strange behavior if you cycle through all array elements using a for loop construct.

var list = [1, 2, 3];
for(var i in list){
  console.log(list[i]);
}

The code will produce this output:

1
2
3
min()

It seems that the for loop also iterates over the recently added method.

The method can only be removed from the Array class, not from an instance of it:

delete Array.prototype.min;

It can not be removed, but overwritten by assigning a value to it:

list.min = 0;

So, if you still want to use the for loop to iterate over the entries, you have to check the type of each entry:

for(var i in list){
  if(typeof(list[i]) != 'function'){
    console.log(list[i]);
  }
}

Note: this is a really old article which I never finished at first. As I had some time waiting at the airport, I managed to finish the article and the demo site. ;-)

Some months ago I mentioned how to prevent the browser from selecting HTML elements. While I was working on an early prototype of a new functionality, I discovered an interesting pit fall in handling events in all browsers.
When I tried to move an HTML element, suddenly it was not moved on the screen. Furthermore it seemed that no mouse event was handled to my functions. I double checked that the event handles were assigned to the specified element and also checked the functions which should be called on the mouse events.
It was like something strange cut off the event handle and did not inform my functions about the mouse move. It took me a while to notice the strange new cursor which my Firefox showed. The browser showed a typically drag-and-drop cursor. By selecting the GUI element, I unnoticed selected some text which lay inside this element!
When you select text in your gecko-based browser you can drag it into places like the address, a textarea or create a bookmark based on the selected content. This is a nice feature, but it is important to know this internal method has priority against JavaScript functions which are bound to events.
I have created a little test page on which you can have a look at this behavior.

So, remember: internal browser events are fired before custom events.

You can save execution time by assigning values to variables at the same time there are initilized.

var myString;
var myArray;
 
myString = 'lorem ';
myString += 'ipsum';
 
myArray = new Array();
myArray.push('foo');
myArray.push('bar');

You can also save a little amount of time by avoiding concating strings via the += operator.

var myString = 'lorem ipsum';
var myArray = ['foo', 'bar'];

The best way to comment directly in the source code is using JSDoc, the JavaScript equivalent of JavaDoc.

To comment on the code, just insert specially formatted comment lines (starting with /** instead of /*) containing a description text and tags before each class, attribute or method. As in JavaDoc, there a several tags to describe the source code: @param, @return, @version and many more.
If you have included this comments, you have to run a perl script over the javascript files which creates a bunch of HTML files containing the information from your sources.

But be careful if you are commenting on private methods! In this example there will be no comment for _privateMethod():

/**
 * Description for this MyObject..
*/
function MyObject(){
 
/**
 * @param {object} myElement Description for myElement
 * @private
*/
  var _privateMethod = function(myElement){
    ;
  }
 
/**
 * @return {number} Answer to Life, the Universe, and Everything
*/
  this.publicMethod = function(){
    return 42;
  }
 
}

JSDoc does not support this way of defining private methods. You have to use this scheme:

 
function MyObject(){
  function _privateMethod(){
    ;
  }
}

The last four days just went by so fast, that I can hardly believe that today is the last night in Banja Luka. It was an interesting experience to get out of the company building and see a completely different part of Europe. I never have been to the eastern Europe before, so I was surprised how well developed and western-orientated Bosnia and Herzegovina, but especially Croatia are.

Florian and I took the plane from Stuttgart and arrived about an hour later in Zagreb from where we continued our journey with a rental car to Banja Luka. Tomorrow we will take the same way back, but take a new external co-worker with us.

I do not want to write a long travelogue about my time here, therefor I will concentrate on the important part: with each journey you take you will gather experiences and learn...

What I learned about IT

1. It is possible to work prolific with just a laptop and a desk.
2. Skype will replace calling cards.
3. I will never get excited about theoretical features and techniques until I know for sure that they actually work.
4. Outsourcing only applies to code monkeys. Hopefully! :-/
5. Camtasia Studio is a great tool.
6. I just can not talk about programming the whole day long. Especially not for four days...

What I learned about Bosnia and Herzegovina

1. Bosnian radio stations, which are cool, play the same songs as in Germany. And in every other western country I guess...
2. The people are really hearty and prove to be great hosts.
3. The food is very tasty here: so much meat! :-)
4. Traffic lights blink green before they switch.
5. A tip of 10% is usual.
6. All 30 Cyrillic letters can be mapped 1:1 to latin ones.
7. German cars are so favored here that you are not allowed to take a rental car of German brands into the country.

What I learned for life

1. Germans still have a good reputation. :)
2. There are geeks in every country.
3. My (spoken) English is much better than I tought.
4. Germany is not the only country in which cars are a status symbol.
5. There are actually Irish Pubs that do not offer Guinness or Cider!
6. Germans are driving and parking much better than they appear to. This is even true for people from Cologne!

For the next week I will be on my first business trip to Bosnia and Herzegovina, together with my co-worker Florian. We will stay at this nice hotel "Firenza" from Monday until Friday in the second biggest city: Banja Luka.
As we will have WLAN we both will probably do some blogging. ;-)

View Larger Map

The Internet Explorer has the nice ability to detect specially formatted HTML comments and recognize them as programmable conditions. While all other browsers are treating them as regularly HTML comments, they will ignore the conditions and its branches completely.
Thus we have a great possibility to address Internet Explorer browsers in a valid, standard-compliant way without using a client or server side scripting language.

Generally conditions start with [if] and end with [endif]:

<!--[if exp]>
 HTML block <![endif]-->

The typically use of this technique to figure out which version of Internet Explorer the client is using. An expression can contain the string IE, the version number, comparison operators (lt, lte, gt, gte), boolean operators (&, |, !) and parentheses ((, )).
With this constituents it is possible to construct flexible version number detections.

<!--[if IE]>

<link rel="stylesheet" href="styles_ie.css" type="text/css">
<[endif]-->

It is even possible to nest comments.

<!--[if IE]>

  <![if gte IE 5]>
<link rel="stylesheet" href="styles_ie5.css" type="text/css">
  <![endif]>
 
  <![if (gt IE 5)&(lt IE 7) ]>
<link rel="stylesheet" href="styles_ie55_and6.css" type="text/css">
  <![endif]>
 
  <![if IE 7]>
<link rel="stylesheet" href="styles_ie7_hacks.css" type="text/css">
  <![endif]>
<![endif]-->