Claudiu Persoiu

Blog-ul lui Claudiu Persoiu


Archive for the ‘Browsers’ Category

Internet Explorer, select tag and onload

without comments

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:

<select id="select">
 <option value=a>a</option>
 <option value=b>b</option>
 <option value=c>c</option>
</select>
<script>

var checkSelected = function () {
 var element = document.getElementById('select');
 alert(element[element.selectedIndex].value);
}

// run after onload
window.onload = checkSelected;

// run before onload
checkSelected();

</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.

Written by Claudiu Persoiu

9 October 2011 at 2:09 PM

The 3d web with HTML5

without comments

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!

Written by Claudiu Persoiu

8 June 2010 at 10:35 PM

Posted in Browsers,JavaScript

Tagged with , ,

Unknown runtime error – Internet Explorer with InnerHTML – another meaningful error

without comments

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:

canvas.innerHTML = '';

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

<table border="0" cellspacing="0" cellpadding="0">
<tbody id="canvas"></tbody>
</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!

Written by Claudiu Persoiu

6 June 2010 at 2:20 PM

JavaScript Games

without comments

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!

Written by Claudiu Persoiu

2 August 2009 at 7:14 PM

Good bye YSlow, welcome Page Speed

without comments

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.

Written by Claudiu Persoiu

17 July 2009 at 9:21 PM

Posted in Browsers,Diverse

Tagged with , , , ,

Software adoption rate and web development

with 2 comments

How does the rate of adoption of new software products and/or version influences the software development for Web and client-server type products?
From the perspective of a web developer, we are restricted by the servers for which we develop and our client’s browsers. Compromise often go very far for the sake of meeting a more broader market.

PHP

Currently stable version of PHP is 5.3.0, but using this version in production would be a childish decision. The version has been out for a little while and the probability to find this version on the hosting servers is very slim.

Of course, a more appropriate version is 5.2.10.  And yet, if version 5 was released almost 5 years now, why a popular framework like CakePHP yet uses the advantages brought by this version? Because until recently an important part of shared hosting servers that have support for PHP, still had version 4.

How is this translated in production? If you don’t develop internal products, or on your own servers, or servers which you can control, you should be aware that your product should be compatible with older PHP versions, and the new features of the language should not be used in production.
Ridiculous and sad but true.
PHP 5.3 brings quite a lot of new features,  but until these features can be used in production few years will have to pass. And until they get in frameworks probably even more (ie namespaces are useful in frameworks).

MySQL

Current stable version is 5.1.36. 5.x version, released in2005 brought many new features, some of them are: stored routines (functions and procedures), triggers, views, cursors, information schema, etc.

Stored routines is probably one of the biggest changes. They are probably most known from Oracle PL/SQL, although MySQL has implemented from the ANSI SQL 2003standard.

Because MySQL 5.0 was in beta for a long time, the rate of adoption is very low. Again, after almost 4 years since the version was released, and it is not yet sufficiently widespred.

Conclusion, simply put it is not recommended the use of the new features if you can not control the version on the server.

Browsers and JavaScrip

The browser problem affects both developers and designers.

Probably the oldest browser still used on a large enough scale is Internet Explorer 6. It was launched in 2001 and after 8 years it is still used by ~ 30% of users.

JavaScript in 2001 was still considered a scripting language infant, which was mostly used for visual effects.

After the “discovery” of AJAX in 2005 , JavaScript was reborn. JavaScript was not just a scripting language used for reduced visual effects, but was regarded as a technology of the future.

Browsers such as FireFox, Opera, Google Chrome or Safari have made progress to improve the speed of JavaScript execution. Even Internet Explorer 8 works better with JavaScript, but it is far from being as popular as version 6. And for the problem to be complete, Microsoft has a big issue with keeping the compatibility between their products.

The reason for this problem in adoption of new versions of Internet Explorer is the operating system. The most popular operating system is Microsoft Windows XP and it has pre-installed Internet Explorer 6. Given that Windows Vista had a fairly low adoption rate because of the initial bugs, drivers issues, resource consumption, and other problems, meant that Windows XP was still very popular. Of course not everyone using Windows XP use IE 6, many have updated or simply use another browser. But still many of them are using the browser that is default.

Speaking of this, Windows 7 will be distributed in Europe without IE installed. I’m very curious how will this influence the browsers market.

Lately “smart phones” and PDA devices have become increasingly popular. A lot of people use them to navigate on the Internet. So after the issues related to browsers on PCs, now there is a hole new set of issues on mobile device browsers.

For instance, my phone came with two browsers: Internet Explorer and Opera. Internet Explorer Mobile is terrible, so I’m using Opera which does a good job.

The problem is that many PDA / smart phone devices with Windows Mobile OS only have Internet Explorer in standard, and the previous problem returns.
When it comes to the famous Apple iPhone, Safari browser is used (and I believe that you can’t install another browser, but I’m not sure if that is true any longer).
So when you create an interface or a JavaScript application, you must take into account several aspects such as:

  • device(eg PC, PDA, smart phone etc.)
  • operating system (eg Windows, Linux, Mac, Symbian etc.)
  • browsers and there versions (eg Internet Explorer 6,7,8; FireFox, Safari, Opera etc.)
  • HTML 5 is almost here, but when it comes to browsers, I wonder when will we be able to use it on a large scale, given that the market is currently dominated by IE 6 and 7.

    I give it about 5 years…

    Written by Claudiu Persoiu

    15 July 2009 at 9:55 PM

    Plug-inuri Firefox utile pentru developeri

    without comments

    Si acesta este unul dintre motivele pentru care eu prefer FireFox!

    Ca tot scriam de unelte utile si nepromovate in postul trecut, acum m-am gandit sa listez cateva plug-in-uri interesante pentru browserul meu favorit, FireFox!

    Si acestea sunt cateva plugin-uri care mi se par utile cand vine vorba de development si nu numai:

    YSlow – dezvoltat de Yahoo! pentru a urmarii cateva reguli de baza pentru viteza de incarcare a paginii

    Web Development toolbar – adauga un toolbar cu diverse instrumente foarte utile pentru development

    Firebug – unealta arhicunoscuta pentru debuging live de DOM si CSS

    Live HTTP Headers – pentru a se vedea headerele care transmit in tranzactii si chiar genera raspunsuri

    IE Tab – afisaza pagina in motorul de Internet Explorer… fara sa-l deschida, foarte util pentru teste de compatibilitate fara a fi nevoie sa se deschida o noua fereastra, iar schimbarea se face cu un singur click

    ColorZilla – una dintre facilitatiile foarte interesante este care are un picker de culori care se poate folosi direct in browser, asta pe langa multe alte unelte

    FireShot – pentru screenshot-uri de pagina direct in browser, una din facilitatile utile este ca se pot face screenshot-uri la intreaga pagina (inclusiv zonele care nu se vad)

    MeasureIt – traseaza linii pentru a masura elemente din pagina

    Venkman – debugger de JavaScript (despre care am mai scris)

    FireFTP – client ftp pentru FireFox, simplu si util

    Console2 – un inlocuitor mai avansat pentru Error console

    Regular Expression Tester – cum spune si numele, unealta pentru expresii regulate

    Nagios Checker – pentru monitorizarea serverelor

    Live PageRank – pentru a vedea PR-ul paginii curente

    Evident lista este scurta si nu sunt decat cateva plug-in-uri care le prefer eu. Lista completa este gigantica si cuprinde cam tot ce ai visat sa aiba un browserul si chiar mai mult.

    Written by Claudiu Persoiu

    21 April 2009 at 11:16 PM

    JavaScript debugging cu Venkman

    without comments

    Din ciclul unelte utile dar nepromovate, in aceasta seara avem o mica unelta numita Venkman. Unealta este realizata ca extensie pentru FireFox si se foloseste pentru debugging a codului JavaScript.

    Nu stiu daca mi se pare mie sau chiar sunt foarte putine instrumente pentru asa ceva? Google Chrome are niste unelte foarte interesante pentru urmarirea proceselor JavaScript, iar probabil la polul opus se afla Internet Explorer cu niste mesaje deosebit de generice (si suficient de inutile) cu privire la erorile gasite.

    Dar de multe ori nu sunt erori de cod ci erori de logica.

    Dar sa revenim la Venkman, acesta ofera posiblitatea de a urmarii executia pas cu pas, de a opri un script sau de a continua. Imi aduce aminte de uneltele din Visual Studio pentru C++, evident nu este la nivelul acela dar este un mare pas inainte pentru JavaScript.

    In ultimele luni am incercat sa fac mici joculete in JavaScript, iar o astfel de unealta mi se pare foarte utila pentru a urmarii executia pas cu pas.

    Oricum mi se pare ca JavaScript a devenit doar de putin timp apreciat la adevaratul potential, iar aceste unelte aduc limbajul la nivelul la care merita.

    Written by Claudiu Persoiu

    18 April 2009 at 12:05 AM

    Un browser… multe frustrari…

    without comments

    A fost o data ca niciodata Internet Explorer 6. Sunt sigur ca toata lumea a avut placerea sa-l cunoasca, sa-l foloseasca etc.

    Cand eram la inceputuri foloseam Internet Explorer ca sa testez ce faceam, pana sa aflu ca FireFox este mult superior pentru…. eh, e mai bun pentru orice.

    Cand a aparut Vista ma gandeam ca unele lucruri o sa se schimbe, dar… nu a fost asa, iar Vista se pare ca a fost un dezastru mai mare decat era anticipat. O data cu asta XP a mai primit niste ani de gratie si o data cu el… Internet Explorer 6.

    Sa nu ma intelegeti gresit Internet Explorer 6 chiar mi se pare un browser reusit, a fost chiar foarte bun la vremea lui, dar vremea lui a cam trecut! Cum poate compara cineva FireFox 3 cu el? Ca sa nu ne gandim ca IE 8 e pe drum, iar la noi IE 6 inca este cel mai popular.

    Gata! Prea multi developeri si designeri frustati si chinuiti! Internet Explorer 6 trebuie sa dispara!

    Written by Claudiu Persoiu

    11 April 2009 at 3:40 PM

    Posted in Browsers

    Tagged with ,

    Argumentele id si name in Internet Explorer si FireFox

    without comments

    Ca tot postam zilele trecute legat de incompatibilitati cu adevarat enervante, zilele trecute am descoperit un bug care l-am plantat cu succes de mai bine de un an jumatate.

    Aveam niste campuri, respectiv:

    <input id="cos1" name="cos20" type="text" />
    <input id="cos2" name="cos19" type="text" />
    <input id="cos3" name="cos18" type="text" />
    --------
    <input id="cos10" name="cos11" type="text" />
    <input id="cos11" name="cos10" type="text" />

    Ideea era ca atunci cand trebuie sa verific din JavaScript sa o fac folosind un for() iar din PHP folosind numele.

    Codul JavaScript arata cam asa:

    for(var i=1; i<=coshmax; i++)
    {
         element = document.getElementById("cos"+i).value;
         if(element>0 && !isNaN(element))
               faCeva();
    }

    Pana aici totul bine, am testat aplicatia de nenumarat ori si nu a fost nici o problema.

    Pana acum cateva zile cand am primit o reclamatie ca exista o problema pe la ultimele optiuni, respectiv asta se traduce prin ultimele variabile. Am inceput sa testez in Internet Explorer pentru ca acesta era deschis, apoi am testat si in FireFox ca sa urmaresc codul JavaScript si surpriza… in FireFox mergea fara probleme.

    Am pierdut aproape jumatate de ora holbandu-ma si punand alert()-uri ca sa inteleg ce se petrece, apoi am realizat: Internet Explorer nu face mare diferenta intre id si name.

    Problema era ca atunci cand apelam id-ul cos10 primeam valoarea de la id=”cos10″, cand testam cos11 primeam valoarea de la name=”cos11″. Rezultatul: nu mai testam ultima variabila nicioada.

    Evident solutia a fost simpla, am redenumit id-urile ca sa nu mai existe artibute name si id cu aceeasi valoare.

    Cazul acesta nu a fost foarte “trist” pentru ca am rasit bug-ul si am putut sa trec mai departe la ce faceam, dar daca eram la final de program dupa o zi agitata cred ca rezultatul era cu totul altul.

    Problema este cu atat mai ciudata cu cat daca uiti sa redenumesti un element poti sa te trezesti cu un bug de toata frumusetea, respectiv daca in loc sa dai la un element name ii dai id, o sa mearga in Internet Explorer si… cam atat, de ex:

    <input type="text" id="variabila" />

    in Internet Explorer va fi trimis foarte frumos ca orice alta variabila, iar in alte browsere cum ar fi FireFox evident… nu!

    Si dupa ce ca bug-ul asta era foarte greu de remarcat oricum nu aparea decat in cateva cazuri speciale, motiv pentru care a si stat linistit un an jumatate.

    Written by Claudiu Persoiu

    14 February 2009 at 12:14 PM