Claudiu Persoiu

Blog-ul lui Claudiu Persoiu


Archive for the ‘Firefox’ tag

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

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

    Internetul este pentru toata lumea dar nu pentru toate browserele?

    without comments

    Povestea incepe pe la inceputul Internetului, atunci cand WWW era inca la inceput, conexiunea se facea prin linii telefonice incete iar Mosaic facea furori. Dar a trecut mult timp de atunci, acum problema generala e cum sa faci o pagina web sa se miste ca o aplicatie Desktop si sa arate ca nimic altceva vazut pana acum. Dar cum unicitatea este doar o problema de timp iar aplicatile web nu vor ajunge niciodata cu adevarat aplicatii desktop nu are rost sa vorbesc despre asta.

    Problema este ca o data cu dezolvarea Web-ului tehnologiile au inceput sa fie confilctuale, iar cand spun asta nu ma refer la lucruri cum ar fi ca Microsoft nu a implementat <blink> in Internet Explorer sau ca <form> are margin in Internet Explorer iar in FireFox nu, ma refer la lucruri cu adevarat enervante, cum ar fi incompatibilitatile intre DOM din JavaScript si cel din JScript de la Microsoft. Unul din site-urile care mi se par bizar de incompatibile cu Internet Explorer este site-ul Ubuntu.

    Ubuntu.com in Internet Explorer

    Ubuntu.com in FireFox

    Ubuntu.com in FireFox

    Cand esti o distributie de renume cum e Ubuntu e usor de inteles de ce nu te preocupa compatibilitatea cu IE dar asta nu se aplica si in general. Nu poti pur si simplu sa te duci la un client si sa-i explici ca pe tine nu te intereseaza compatibilitatea cu un anumit browser pentru ca numarul clientiilor va scadea in mod dramatic. Acesta este si unul dintre motivele pentru care nuprea poti sa faci design sau programare JavaScript in linux, cel putin nu lucruri complexe fara sa testezi in Internet Explorer, cel putin partial.

    Din pacate se pare ca nici versiuniile Internet Explorer nu sunt tocmai compatibile intre ele, iar cum in acest moment cel mai folosit browser (in Romania) este Internet Explorer 6, urmat la mica distanta de Firefox 3 si Internet Explorer 7, la construirea unui site trebuie luate in calcul toate cele 3 versiuni.

    Problema cea mai mare este ca Web-ul acum nu mai este doar pentru sisteme Desktop si eventual cateva Laptop-uri de ultima generatie cum era cu ani in urma, acum exista sisteme cu diverse sisteme de operare, dispozitive mobile etc. De exemplu eu am pe telefonul mobil (HTC Touch Diamond) doua browsere in mod implicit, Internet Explorer si Opera 9.5 pentru mobil, diferentele sunt foarte mari si cu parere de rau Internet Explorer pentru mobil este deosebit de slab! Ca webdeveloper trebuie sa iei in calcul marea majoritate a dispozitivelor de pe piata, nu poti ignora un segment de piata si in special dispozitive de lux, acel segment de piata este foarte important pentru oricine.

    Din fericire toate aceste probleme se rezuma de cele mai multe ori la compatibilitatea dintre diferite versiuni de Internet Explorer si celelalte browsere care sunt in general surprinzator de compatibile intre ele. De exemplu eu testez aplicatile in general doar in Internet Explorer si FireFox pentru ca in general daca se comporta similar in cele doua se vor comporta similar si in Opera, Safari, Chrome si altele.

    Sa speram ca o data cu Internet Explorer 8 se vor mai reduce din problemele de incompatibilitate si pe segmentul de piata detinut de Microsoft si o data cu asta Internetul va redeveni nu doar pentru toata lumea ci si pentru toate browserele.

    Written by Claudiu Persoiu

    8 February 2009 at 2:00 PM

    Un browser pentru Web 2.0

    without comments

    Zilele trecute Google a lansat Google Chrome. Un browser construit dupa “imaginea” google, simplu pana la extrem. Aparent nimic nou sub soare, nu?

    Cu cat lucrezi mai mult cu el, cu atat parca devine mai fascinant. O interfata simpla cu nici un buton mai mult decat cele de care este neaparata nevoie.

    Ce este in spatele acestuia este cu adevarat fascinant. Browserul este deosebit de rapid, foloseste webkit pentru randare, ceea ce inseamna ca este compatibil cu browserul Saffari de la Apple. Cu alte cuvinte, aplicatiile nu trebuie sa ia in calcul un alt browser, ci doar sa fie compatibile cu browserul de la Apple.

    Viteza este un plus foarte mare pentru acest browser, personal de cand a aparut firefox 3 nu credeam sa apara un browser mai rapid dar… este adevarat, se poate si mai bine!

    Un alt element de noutate foarte interesant este izolarea proceselor din tab-uri. La celelalte browsere care suporta tab-uri, in general cand un tab crapa, tot browserul va ceda. In Chrome, cedeaza doar tab-ul respectiv, restul ramanand functional.

    Izolarea nu se face doar la nivel de tab ci chiar la nivel de proces, cu alte cuvinte scripturile JavaScript, Flash-ul, etc toate ruleaza in propriul proces, rezultatul? Cand un proces cedeaza nu cedeaza tot tab-ul, ci doar acel proces izolat.

    O unealta noua pentru debuging este “Task managerul”, care permite urmarire fiecarui proces in particular.

    Interpretarea JavaScript se bucura probabil de cele mai multe avantaje in acest browser. Scripturile JavaScript nu sunt interpretate ci sunt precompilate inainte de rulare rezultand intr-o mult mai buna viteza fata de vechiul sistem.

    Concluzionand, google a facut o treaba buna din nou chiar daca este doar o versiune beta.

    Dupa cum stiti aparut versiunea 3 a browserului Firefox. O versiune mult imbunatatita pentru un browser care era deja in top (pacat ca nu si la numarul de utilizatori). Acum tot ce astept este versiunea 8 de la IE, personal nu consider IE 7 o versiune “revolutionara”, ci doar putin inbunatatita. Microsoft trebuie sa reactioneze daca vrea sa pastreze monopolul in acest domeniu, lumea are tendinta sa se orienteze catre alte browsere, iar cu noiile faciltati de la concurenta nu mai este mult pana cand singurul motiv pentru care cineva mai foloseste IE este din comoditate.

    Written by Claudiu Persoiu

    5 September 2008 at 7:28 PM