Claudiu Persoiu

Blog-ul lui Claudiu Persoiu


Archive for the ‘Browsers’ Category

Internet Explorer, select tag si onload

without comments

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:

<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);
}

// ruleaza dupa onload
window.onload = checkSelected;

// ruleaza inainte de onload
checkSelected();

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

Written by Claudiu Persoiu

9 October 2011 at 2:09 PM

Web-ul 3d cu HTML5

without comments

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!

Written by Claudiu Persoiu

8 June 2010 at 10:35 PM

Posted in Browsers,JavaScript

Tagged with , ,

Unknown runtime error – Internet Explorer cu InnerHTML – alta eroare plina de sens

without comments

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:

canvas.innerHTML = '';

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

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

Written by Claudiu Persoiu

6 June 2010 at 2:20 PM

JavaScript Games

without comments

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!

Written by Claudiu Persoiu

2 August 2009 at 7:14 PM

La revedere YSlow, bun venit PageSpeed!

without comments

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.

Written by Claudiu Persoiu

17 July 2009 at 9:21 PM

Posted in Browsers,Diverse

Tagged with , , , ,

Rata de adoptie si dezvoltarea de software pe web

with 2 comments

Cum influenteaza rata de adoptie a noilor produse si/sau versiuni de soft dezvoltarea produselor pentru Web si cele de tip client-server?

Din perspectiva unui web developer, suntem restrictionati de serverele pentru care dezvoltam si browserele clientilor. De multe ori compromisurile merg foarte departe de dragul de a satisface o piata mai larga.

PHP

In prezent versiunea stabila de PHP este 5.3.0, totusi folosirea acestei versiuni in productie ar fi o decizie puierila. Versiunea a aparut de putin timp si probabilitatea de a gasi aceasta versiune pe serverele de hosting este foarte mica.

In mod logic o versiune mai potrivita este 5.2.10. Si totusi, daca versiunea 5 a aparut acum aproape 5 ani, de ce un framework popular precum CakePHP inca nu foloseste avantajele aduse de aceasta versiune? Pentru ca pana de curand o buna parte din serverele de shared hosting care aveau suport pentru PHP, aveau inca versiunea 4.

Cum se traduce asta in productie? Daca nu dezvolti produse interne sau pe servere proprii, sau asupra carora ai control, ar trebui sa fi constient ca produsul tau poate ar trebui sa fie compatibil si cu versiuni de PHP mai vechi, iar noile facilitatie nu trebuiesc folosite.

Trist si ridicol dar adevarat.

PHP 5.3 aduce destul de multe facilitati noi, dar pana aceste facilitati vor putea fi folosite in productie probabil vor mai trece cativa ani. Iar pana acestea vor ajunge si in framework-uri probabil si mai mult (de exemplu namespace-urile sunt utile in framework-uri).

MySQL

Versiunea stabila curenta este 5.1.36.  Versiunea 5.x, lansata in 2005 a adus multe facilitati noi, cateva dintre ele sunt: rutine stocate (functii si proceduri), triggere, views, cursori, information schema etc.

Rutinele stocate probabil reprezinta una dintre cele mai mari schimbari. Acestea sunt cel mai cunoscute probabil de la Oracle PL/SQL, desi MySQL le-a implementat dupa standardul ANSI SQL 2003.

Dar pentru ca MySQL 5.0 a stat mult in beta rata de adoptie este si aici foarte scazuta. Din nou, sunt aproape 4 ani de cand a fost lansata versiunea iar ea inca nu este suficient de raspandita.

Concluzia, pur si simplu nu se recomanda folosirea noilor facilitati daca nu vei putea controla serverul.

Browserele si JavaScript

Problema browserelor ii afecteaza atat pe programatori cat si pe designeri.

Probabil cel mai vechi browser folosit pe o scara inca destul de larga este Internet Explorer 6. Acesta a fost lansat in 2001, adica in urma cu 8 ani si este inca folosit de ~30% dintre utilizatori.

In 2001 JavaScript era considerat inca un limbaj de scripting infantil, care era folosit mai mult pentru efecte vizuale simple.

O data cu “descoperire” AJAX in 2005, JavaScript a prins din nou viata. JavaScript nu mai era doar un limbaj folosit pentru efecte vizuale reduse ci era privit ca o tehnologie de viitor.

Browsere cum ar fi FireFox, Opera, Google Chrome sau Safari au facut progrese mari pentru a imbunatatii viteza de executie pentru JavaScript. Pana si Internet Explorer 8 lucreaza mai bine cu JavaScript, dar este departe de a fi la fel de popular ca versiunea 6. Si ca sa fie completa problema Microsoft are o mare problema cu pastrarea compatibilitatii intre produsele sale.

Motivul pentru aceasta problema de adoptie a noilor versiuni Internet Explorer este de fapt sistemul de operare. Cel mai popular sistem de operare de la Microsoft este Windows XP. Acesta avea preinstalat Internet Explorer 6. Avand in vedere ca Windows Vista a intrat mult mai greu pe piata din pricina bug-urilor initiale, problemelor cu driverele, resurselor consumate si a altor probleme, a insemnat ca Windows XP a ramas inca foarte popular. Evident nu toti care folosesc Windows XP utilizeaza IE 6, multi au facut update sau pur si simplu folosesc alt browser. Dar multi dintre utilizatori folosesc acest browser care vine preinstalat.

Apropo de acest aspect, Windows 7 va fi distribuit in Europa fara IE instalat. Sunt foarte curios cum va influenta asta piata browserelor.

In ultima vreme telefoanele “smart phone” si dispozitivele PDA au devenit tot mai populare. Multa lume le foloseste pentru a naviga pe Internet. Deci dupa problema de compatibilitate cu browserele de pe PC, acum apare si problema de compatibilitate cu browserele de pe mobil. De exemplu, telefonul meu a venit cu doua browsere: Internet Explorer si Opera. Internet Explorer pentru mobil este groaznic, asa ca eu folosesc Opera care face o treaba buna.

Problema este ca multe dispozitive PDA/smart phone cu Windows Mobile au doar Internet Explorer in standard, si  revenim la problema anterioara.

Cand vine vorba de Apple cu renumitul iPhone browserul folosit este Safari (si cred ca nu se poate instala alt browser, dar nu sunt sigur ca mai este inca aceasta problema).

Deci atunci cand realizam o interfata sau o aplicatie JavaScript, ar trebuie sa luam in considerare cateva aspecte cum ar fi:

  • dispozitiv (ex: PC, PDA, smart phone etc.)
  • sistem de operare (ex: Windows, Linux, Mac, Symbian etc.)
  • browser cu versiunea aferenta (Internet Explorer 6,7,8; FireFox, Safari, Opera etc.)
  • HTML 5 este aproape aici, dar cand vine vorba de browsere ma intreb cand se va spune cu adevarat despre HTML 5 ca se poate folosi pe scara larga avand in vedere ca peste jumatate din piata in arest moment este dominata de IE 6 si 7.

    Eu zic ca o sa fie cam 5 ani…

    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