Another reason why I hate Internet Explorer.

All new browsers tend to cache form values. Nothing unusual up to here, a little annoying, but not unusual.

We have the following example:

 1<select id="select">
 2 <option value=a>a</option>
 3 <option value=b>b</option>
 4 <option value=c>c</option>
 5</select>
 6<script>
 7
 8var checkSelected = function () {
 9 var element = document.getElementById('select');
10 alert(element[element.selectedIndex].value);
11}
12
13// run after onload
14window.onload = checkSelected;
15
16// run before onload
17checkSelected();
18
19</script>

Load the page, select the third value and then refresh. Because no form was submitted the first impression is that the result will always be “a”. It seems it’s not really like that:

• FireFox: c c
• Google Chrome: a a
• Internet Explorer: a c

I can understand why FireFox choose to cache the values even when no form was submitted.

I can understand Google Chrome for not caching the page if the form was not submitted.

But Internet Explorer caches the values and them loads them only after the page was loaded? This is confusing to me! I mean you don’t have the option of not using onload? Not even if the form was not submitted?

This test was made on Internet Explorer 9 and compatibility view to versions 7 and 8.

Last week-end I was surfing the Web wandering why there isn’t any 3d done in JavaScript. A ridiculous question in a hot afternoon.

My question was born from the idea that the first stage in 3d evolution was done in 2d, basically representing 3d objects using the existing 2d ways.

Of course I came across my first answer: a 3d shooter game directly in the browser, done by Ben Joffe!

It is at least impressive!

Beside this find I immediately came across some other 3d games in JavaScript that are not using tags like canvas, but this results are not very impressive because of a simple reason: speed!

Before HTML5 the speed of displaying elements in the browser was a very big issue. Is well know that one of the slowest components of the browser is the DOM, especially in Internet Explorer. When it comes to the canvas a huge difference is visible in the good way, the multitude of the objects on the stage are not coordinated using the DOM but rather just displayed in a true graphical element.

While I was opening my computer today I was thinking why doesn’t anyone make a game at least like Duke Nukem 3D? Of course the browser will not become just yet a platform that can compete with XBOX for games ant that’s normal… I don’t even know how did I come across this, but it was just like something in my universe drown me to something truly impressive:

Quake 2 directly in the browser, using JavaScript!

At the beginning I thought that they cheated, they’ve used WebGL, not just the 2d popular canvas. But the result is truly impressive, and this standard will probably be available as an HTML5 specification, which means it will be available on at least a part of the browsers.

Even though they’ve used GWT, the resulting code is still JavaScript, so this can be made just using JavaScript!

Where did the hole idea of 3d in browsers came from? I’ve read about 2 years ago about some efforts in this direction, and they ware based on VRML. But VRML exists as a standard since 1994 and I haven’t seen anything  impressive yet. I even have a VRML book that is full of dust in a shelf. The biggest issue was that there was no native support for it.

The new perspective is absolutely innovative, because is a bridge between the browser and the 3d hardware. So if one day we will have 3d in our browsers it will be done this way!

I was working the other day on a new JavaScript game for the games section. Like the majority of the developers (like the statistics show) I’m using FireFox for developing. But as the game reached the testing faze it was time to see if it was working properly in Internet Explorer.

To test in Internet Explorer is a real pleasure, basically you see an error and then you hope that you’ll find the source.

Of course there was an error, one full of meaning as usual:

Unknown runtime error??? WTF??? If he does not know how should I?

The piece of code that was generating the error was:

1canvas.innerHTML = '';

Where canvas was a variable which was storing an document.getElementById(‘canvas’), and the id canvas was from:

1<table border="0" cellspacing="0" cellpadding="0">
2<tbody id="canvas"></tbody>
3</table>

Looks wrong? well is not because at that point I was testing other games which are using the same thing with no trouble, even in IE.

I’ve tried it in IE 6, of course with the same result.

It looks like this error appears on elements like table, tbody, p and others.

To finally fix the issue I used instead of a tbody, a div tag in which I’m adding the elements and the issue was gone.

What is interesting is that this issue does not always appear for a specific tag!

Thank you Microsoft for this meaningful error messages that are so full of logic!

Today the JavaScript Games section is officially launched! The games have been recently created, after the model of classic games.

I’ve started the first game to show a friend that it is possible to build this kind of apps with JavaScript. And this is one of the main ideas of the section: interactivity in the browser using only HTML, CSS and of course JavaScript!

Today I make them public because is a shame to not give others the chance to waste time playing :).

The games should work cross-browser, they don’t have HTML 5 or other stuff that can lead to incompatibility. They shall prove the power of JavaScript, without any other sophisticated tools.

Many games are not well finished, but I hope that with time I’ll resolve the issues, add new features and of course new games. For suggestions and issues, please send an e-mail to claudiu@claudiupersoiu.ro.

Have fun!

After more than a year of using YSlow, apparently with the arrival of FireFox 3.5 this plug-in is no longer supported.

YSlow is a very interesting tool created by Steve Souders, who wrote High Performance Web Sites, and the new Even Faster Web Sites.

The plug-in, which used the FireBug extension, was a practical tool to analyze performance by the 14 rules described in the book, giving grades to pages at loading. A very useful tool, both for designers and front end developers.

But with the launch of FireFox 3.5, which brings many improvements in speed, YSlow becames incompatible. After what seemed like Yahoo! will totally give up the project a new version appeared. Unfortunately this version is not exactly functional. I do not know if is my FireBug version or just the update was made to shut the mouth of those who complain about the incompatibility.

Google has not launched any time this infra. After launching Google Speed, it seems that not late after that, appeared a substitute for YSlow, named Google PageSpeed.

PageSpeed structure is similar to YSlow, anyway optimization rules are the same for everybody, it’s just how they are approached.

What is more important PageSpeed is compatible with FireFox 3.5.

An interesting fact to know is that Steve Souders now works for Google, maybe this is one of the reasons for which these rival tools, produced by two Internet giants have reached these state.