Inca un motiv pentru care urasc Internet Explorer.

Toate browserele noi au tendinta sa faca cache la campurile de formular de pe o pagina. Pana aici nimic normal, usor enervant, dar nu anormal.

Se da urmatorul exemplu:

 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// ruleaza dupa onload
14window.onload = checkSelected;
15
16// ruleaza inainte de onload
17checkSelected();
18
19</script>

Se incarca pagina, se selecteaza a treia valoare si apoi se face refresh. Pentru ca nu s-a trimis nici un formular prima impresie este ca rezultatul va fi mereu “a”. Se pare ca nu este tocmai asa:

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

Pot sa inteleg de ce FireFox a ales sa faca cache la valori chiar si daca nu se trimite formularul.

Pot sa inteleg si ca in cazul Google Chrome nu face cache la pagina daca nu s-a trimis formularul.

Dar ca Internet Explorer face cache si il incarca de abea dupa ce a incarcat toata pagina? Asta mi se pare confuz! Adica nu ai varianta sa nu folosesti onload? De ce? Nici macar nu am trimis formularul?

Testul a fost facut pe Internet Explorer 9 si compatibility view la versiunile 7 si 8.

In week-end navigam intrebandu-ma de ce nu exista inca 3d pe net realizat in JavaScript. O intrebare ridicola intr-o dupamiaza torida.

Intrebarea mea a plecat de la ideea ca prima etapa in evolutia 3d a fost facuta in 2d, practic reprezentarea obiectelor 3d folosind mijloacele 2d existente.

Evident am ajuns usor la primul meu rezultat: un shooter 3d direct in browser folosind JavaScript realizat de Ben Joffe!

Este cel putin impresionant!

In afara de acest raspuns imediat am mai gasit cateva variante de jocuri 3d realizate in JavaScript care nu se foloseasc de facilitati cum ar fi canvas, dar acele rezultate nu sunt foarte impresionante dintr-un motiv simplu: viteza!

Pana la HTML5 viteza de afisare in browser era o problema foarte mare. Este bine cunoscut ca una dintre cele mai incete componente dintr-un browser este DOM, in special in Internet Explorer. Cand vine vorba totusi de canvas se poate vedea o diferenta imensa in bine, multitudinea obiectelor de pe scena nu mai sunt coordonate prin DOM ci pur si simplu afisate intr-un element cu adevarat grafic.

In timp ce deschideam calculatorul azi ma intrebam, oare de ce nu se poate realiza un joc care sa fie macar ca Duke Nukem 3D? Evident, probabil browserul nu o sa devina prea curand o platforma concurenta cu XBOX pentru jocuri dar este normal… Nici nu-mi dau seama cum am ajuns acolo, dar parca ceva din universul meu m-a inpins spre ceva cu adevarat impresionant:

Quake 2 direct in browser, folosind JavaScript!

Initial m-am gandit ca au trisat, au folost WebGL, nu doar popularul canvas 2d. Dar rezultatul este cu adevarat impresionant, iar acest standard probabil va fi disponibil ca specificatie in HTML5, adica se va regasi pe cel putin o parte din browsere.

Chiar daca au folosit GWT, codul final rezultat este JavaScript, deci asa ceva se poate realiza folosind doar JavaScript!

De unde a plecat toata ideea de 3d in browser? Am citit acum aproape 2 ani despre niste eforturi in acest sens, iar acestea se bazau pe VRML. Dar VRML exista ca standard din 1994 si nimic impresionant nu am vazut pana acum. Am chiar si o carte de VRML care se umple de praf in biblioteca. Marele defect este ca nu exista browsere care sa ofere suport nativ.

Noua perspectiva este cu totul inovativa, pentru ca este o punte intre browser si hardware 3d. Deci probabil ca daca vom avea 3d in browser intr-o buna zi, asa va fi realizat!

Lucram eu zilele trecute la un nou joculet in JavaScript pentru sectiunea de jocuri. Ca marea majoritate a programatorilor (cum arata statisticile) si eu folosesc FireFox pentru dezvoltare. Dar cum jocul a ajuns in faza de testare am zis ca e timpul sa vad daca inca mai functioneaza corect in Internet Explorer.

Sa testez in Internet Explorer este o adevarata placere mereu, practic primesti o eroare iar apoi speri ca ai gasit sursa.

Evident a aparut o eroare, una plina de semnificatie ca de obicei:

Unknown runtime error??? WTF??? Daca el nu stie la ce are eroare, eu cum ar trebui sa stiu?

Bucata de cod care genera eroare era:

1canvas.innerHTML = '';

Unde canvas era un o variabila care stoca un document.getElementById(‘canvas’), iar id-ul canvas era de la:

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

Pare gresit? ei bine nu este pentru ca in acel moment am inceput sa ma uit la alte jocuri care fac cu succes acelasi lucru, chiar si in IE.

Am incercat si in IE 6, evident aceeasi eroare.

Se pare ca eroarea apare la blocuri cum ar fi table, tbody, p si altele.

Ca sa rezolv totusi problema am folosit in loc de un tbody un div in care adaug elementele iar problema a disparut ca prin minune.

Ce este interesant este ca problema asta nu apare tot timpul pentru un anumit tip de tag!

Multumesc Microsoft pentru mesajele de eroare care sunt atat de pline de logica!

Astazi este lansata oficial sectiunea de jocuri JavaScript! Jocurile au fost facute de curand, dupa modelul unor jocuri clasice.

Am inceput primul joc ca sa-i demonstrez unui prieten ca se pot face si astfel de aplicatii in JavaScript. Si pana la urma asta este una dintre ideile principale a le sectiunii: interactivitate in browser folosind doar HTML, CSS si evident JavaScript!

Astazi le fac publice pentru ca este pacat sa nu ofer si altora ocazia sa piarda vremea jucandu-se :).

Jocurile ar trebuie sa functioneze cross-browser, nu au HTML 5 sau alte lucruri care pot duce la incompatibilitate. Trebuie doar sa evidentieze puterea JavaScript, fara alte unelte sofisticate.

Multe dintre jocuri nu sunt bine finisate, dar sper ca in timp voi mai rezolva din problemele lor, voi mai adauga facilitati noi si evident alte jocuri. Daca aveti sugestii sau probleme, va rog trimiteti un mail la claudiu@claudiupersoiu.ro.

Distractie placuta!

Dupa ce mai bine de un an, in care m-am obisnuit sa lucrez cu YSlow, se pare ca o data cu FireFox 3.5 acesta nu mai beneficiaza de suport.

YSlow este o unealta foarte interesanta realizata de Steve Souders, cel care a scris High Performance Web Sites, si mai nou Even Faster Web Sites.

Plug-in-ul, care se folosea de FireBug, era un instrument practic care sa analizeze performantele dupa cele 14 reguli descrise in carte, dand paginilor note in mod dinamic la incarcare. O unealta foarte utila, atat pentru designeri cat si pentru programatorii de front-end.

Dar o data cu lansarea FireFox 3.5, care aduce multe imbunatatiri in viteza, YSlow a devenit incompatibil. Dupa ce se parea ca Yahoo! va renunta total la proiect o noua versiune a aparut. Din pacate aceasta versiune nu este tocmai functionala. Nu stiu daca este de la versiunea mea de FireBug sau pur si simplu update-ul a fost facut ca sa inchida gura celor care se plangeau de incompatibilitate.

Google nu s-a lansat nici de data asta mai prejos. Dupa lansarea Google Speed, se pare ca nu a intarziat sa apara si un inlocuitor pentru YSlow, si anume Google PageSpeed.

Ca structura PageSpeed se aseamana cu YSlow, oricum regulile de optimizare sunt aceleasi pentru toata lumea, e vorba doar de modul cum le abordezi.

Ce are in plus PageSpeed este compatibilitatea cu FireFox 3.5.

Un fapt interesant de stiut este ca Steve Souders acum lucreaza pentru Google, poate asta este si unul din motivele pentru care aceste unelte rivale, produse de doi giganti ai internetului au ajuns in situatia asta.