Jonathan Weiß

I just started another series for my blog. :-)
Today's browsers are quite huge applications charged with so many features and potentials, that you can hardly know all of them. From time to time I will write about less known, but useful and valuably features: the hidden gems.

While playing with the soft hyphen feature of the latest version of Firefox I remembered that I had seen a nice way to cut off text if it is too long for its containing element. A few years ago I accidentally found an entry in a wiki about a special CSS property which can be used to improve the look of texts inside an element with an overflow:hidden style property.

An example of text-overflow

In Internet Explorer 6.0 (and above) and in Safari 1.3 (and above) you can use text-overflow:ellipsis together with overflow:hidden to get this three dots if text is to long.

Be careful with overflow:auto! It seems a bit buggy in Safari, while it works nearly perfect in Internet Explorer.

Update:
The Opera browser (since version 9.0) supports this property, too. You have to use the proprietary attribute -o-text-overflow and your text will be displayed the same way as in Safari.
I guess once CSS3 goes final, all vendors will use the W3C standard property.

Sometimes you need to store some extra information for an HTML element, which provides additional data to your scripts. The best way to store this information is to use it as an attribute value on the element itself.
You could use a special CSS class name for a group of elements which should be handled identically, but you might lose the flexibility of CSS if these elements have completely different styles. Another possibility is to use custom (proprietary) attributes. The Dojo Toolkit makes massively use of this method. Please note that your document will not be valid (X)HTML, if you do so. Anyway, this can be quite useful but you have to be careful how to set and read the attributes.

At runtime an HTML element is presented as a DOM element object. You can add attributes by assigning them to the object.

var myElement = document.getElementById('testDiv');
myElement.mood = 'happy';

What happens if you are dealing with custom attributes that are not assigned at runtime but on the sever side? You will notice two characteristics: at first, all attribute names are lowercased by the browser and secondly this will not work as you expect.

Imagine you have this HTML element:

 
<div id="testDiv" foo="bar"></div>
 

and this script:

var myElement = document.getElementById('testDiv');
alert(myElement.foo);

This alert box will show undefined. It seems that only HTML attributes which are described in the HTML specification (such as id, lang or title) are applied as attributes to the DOM element object. Of course, there are exceptions for this rule: the Internet Explorer applies all attributes to the object.

I made a comparision sheet showing which browser supports which behavior.

		Firefox 2	Opera 9	Safari 3	IE 7
attribute set by assigning
	element.attributeName	yes	yes	yes	yes
	element.getAttribute()	null	null	null	yes
attribute set by setAttribute()
	element.attributeName	undefined	undefined	undefined	yes
	element.getAttribute()	yes	yes	yes	yes
attribute set on server side
	element.attributeName	undefined	undefined	undefined	yes
	element.getAttribute()	yes	yes	yes	yes

So, if you want to use custom attributes while having HTML elements which are created on runtime and on the server side, there is only one possibility: use setAttribute() and getAttribute(). This combination works in every case and in every browser.

Even if there is still much time until the next major version of the Firefox browser will be released, I want to take a quick look at some of the new features, which have its seeds in the Gecko 1.9 engine.

1. <element>.clientLeft() and <element>.clientTop() properties
   These properties conatin each HTML elements absolute position on the browser screen. Instead of calculating this values by using <element>.offsetLeft() or <element>.offsetTop() on the element itself and all parent elements recursively, you can now use this browser calculated values — which is a huge performance enhancement.
   I took a small benchmark with a function containing a large amount of different operations (among many calls of offsetTop() and offsetLeft()) and the new properties increased the execution time by 1,57 to 1,83.
2. Soft hyphens
   This might be interessting for all german-speaking people. It is now possible to use a special kind of hyphen (­) which will be wrapped on line break. From now on you can use the correct notation for coposed words, such as "Warenwirtschaftsystem" instead of the wrong one "Waren Wirtschaft System" just because you have to fear, that the line containing this word will look terrible when using text-align:justify; or breaking your layout.
   
   Comparision of hyphens
3. JavaScript 1.8
   Firefox 3 will also include support for JavaScript 1.8, which gives us developers some goodies, like native JSON encoding and decoding (yeah, faster data exchange ;-) ), more array methods and much more. I just want to concentrate on expressions, which allow you to write your code in a lamda-like way:

   function sqr(x) { return x * x; }

   ca be written as

   function sqr(x) return x * x;

   Here is another longer example, taken from John Resig, which creates and fills an array:

   Number.prototype.__iterator__ = function() {
       for ( let i = 0; i < this; i++ )
           yield i;
   };
   [[ i == j ? 1 : 0 for ( i in 10 ) ] for ( j in 10 )];

It is a bit sad, that most of these great features can not be used (or only with an browser switch) if the end-user is using an older browser wich lacks JavaScript 1.8 support. But on the other hand it is possible to increase your applications performace and eventually these features will be available in other browsers, too.

There are so many articles, podcasts and blog entries about the new iPhone right now that I thought that I would not write anything about this next generation mobile phone. Even though I am not interested in the technical details like screen size, the camera or battery life. And even if my comment about it would fit to my blog – I will also not write about Safari on the iPhone or the integrated web services.
I will concentrate on a point on which Apple has been always very strong and which made the iPod different to other mobile music players and made it the number one: the usability.

I want to point out Apple's supremacy in usability by looking at the way short messages are handled on the iPhone and on mobiles phone running Windows Mobile 5.0.

SMS handling on iPhone and a Windows Mobile based mobile phone

Apple was the only company which realized the important difference from short messages and e-mails: short messages very much like chats between two persons, while e-mails are like written letters.
So where is the point in having the classical separation between inbox and sent items when a SMS conversation is totally different from e-mail? Often e-mails are used chat-like, but in this case you always have the previous dialog blow or above the new text. Imagine you would only have the latest answer of the person you are writing to. If this text would contain something like "Ok, tomorrow then." you would have to go to your sent items folder and search for the last e-mail you sent to this person in order to understand what he is referring to.
Sounds uncomfortable? But this is exactly how short messages are handled on Outlook on a Windows Mobile powered mobile phone. I own a XDA mini S which is nothing else than a HTC Wizard 200 and had the idea to write a different viewing mode for short messages, but never finished this project, because it was more work with the .NET Compact Framework, than I first thought. ;-)
Why did nobody realize that short messages are not e-mails? I guess the engineers at Microsoft just wanted to add SMS support to Outlook Mobile without thinking one step further or thinking about other possibilities to handle them.

Nobody knows by now if the iPhone is going to be another successful product, like the iPod. When the iPod came out it showed the best solution for handling your complete music collection. Together with iTunes everything from ripping a CD, changing a song's name or making custom playlists just needed a few clicks — the rest was done automatically in the background. That was at a time when you had to copy files to your digital music player — which was mounted as a mobile hard drive — and most of them just read in the directory tree and played all files one by one ordered alphabetically.

Whether the iPhone is a success or not, Apple has agin shown that the quality of products can be improved by its handling and usability. This is a point we all can learn: sometimes it is necessary to think one step further or just in another ways as others to get the one bit better than your competitor.

So, think different.

For the most of us, Monday is the beginning of a new working week. Often you feel a bit slow and sleepy (especially if you have a case of Mondays ;-) ).
But having a slow developer in front of the screen does not mean that your code has to be slow as well. So, I started the series Optimization Monday which will include one small, but effective hint for optimizing and speeding up your JavaScript code on each month's first Monday.

Today's hint is: prevent lookups.
Every word in your object chain has to be found in the interpreter's lookup table. You can shorten the chain by using a local variable which holds a reference to your target.

So, instead of

for(i=0; i<100; i++){
  Initech.Web.Framework.WebsuiteObjects.Counter.increase(i);
}

write this:

var incr = Initech.Web.Framework.WebsuiteObjects.Counter.increase;
for(i=0; i<100; i++){
  incr(i);
}

If you are using DOM functions, the advantage of using a reference will be even greater.

Slow:

document.body.childNodes[8].firstChild.childNodes[3].nodeValue = 'foo';
document.body.childNodes[8].firstChild.childNodes[6].nodeValue = 'bar';
document.body.childNodes[8].firstChild.childNodes[8].nodeValue = '42';

Faster:

var elem = document.body.childNodes[8].firstChild;
elem.childNodes[3].nodeValue = 'foo';
elem.childNodes[6].nodeValue = 'bar';
elem.childNodes[8].nodeValue = '42';