VândPupăză

Nu sunt fan Flex desi trebuie sa lucrez cu el destul de des.

ActionScript 3, pe de alta parte, fundament pentru Flex si Flash este cu totul alta poveste. Are momente cand ma incita foarte mult.
Recent am descoperit o bucatica de AS3 nepretuita: local SharedObject.

Cookies

Daca esti familiar cu ceva din web development stii despre cookies ca:

• expira dupa un timp; daca nu este setat explicit, la incheierea sesiunii de browser
• pot stoca un numar limitat de date: 4 kb
• se pot seta 20 de cookie-uri pe domeniu
• pot fi interceptate si detrunate deci nu pune date vitale in ele (email/parola)
• BONUS TIP (de la Yahoo Exceptional Performance): sunt trimise intre browser si client la fiecare call peste HTTP – adica mananca timp si trafic inutil de multe ori.

SharedObject

• actioneaza in stilul cookie-urilor – sunt modul in care flashplayer (din browser) poate seta date pe client.
  (pentru AIR ai sandbox separat)
• nu expira niciodata daca nu se seteaza explicit data de expirare
• nu se transmit niciodata catre server – se interpreteaza local de catre flashplayer.
• fiecare sharedObject stocheaza implicit cate 100kb de date – orice fel de date
• pot stoca tipuri de date native fara serializare – pui un ArrayCollection, XML, etc…, asta scoti.
• Se stocheaza intr-un folder special de pe client
• Nu se distruge la operatiunea de “clear cache” sau “clear cookies“; nu se distruge decat daca domeniul care le-a setat cere acest lucru prin AS3 sau le stergi manual din folderul in care sunt depozitate de flashplayer.
• BONUS TIP: sunt disponibile cross-browser. Date setate de un domeniu pe Firefox sunt disponibile aceluiasi domeniu pe Safari / Internet Explorer / etc…

Suna deja intersant?

Daca nu suna interesant si esti fan JavaScript adu-ti aminte ca ActionScript are clasa numita ExternalInterface. Aceasta permite expunerea publica a unor metode dintr-un SWF (AS3 compilat) catre alte limbaje (think JS).

Poti comunica prin ExternalInterface in ambele sensuri intre ActionScript si JavaScript.

Acum gandeste-te ca poti seta preferintele unui user, la fel cum ai face prin cookie, intr-un SharedObject care este cross-browser si care nu vor fi sterse data viitoare cand isi va rade cookie-urile sau cache-ul.
Din punct de vedere al usability-ului sunt mare fan al tehnologiei care imi permite sa nu imi bat la cap utilizatorul.

Daca el imi cere sa nu vada un anumit mesaj de informare tin minte asta. Daca prefera un anumit theme pentru aplicatia mea, tin minte. Daca prefera un anumit font-size / layout / refresh interval, etc… tin minte. Tin bine minte asta. Si acum si saptamana viitoare, si peste 9 luni.

Evident, nu e bullet-proof, asta in cazul in care utilizatorul isi reinstaleaza sistemul sau e vreo problema orifica la FlashPlayer. Mai bine ar fi sa il tin minte intr-o baza de date dar efortul tehnic pentru asa ceva este considerabil mai mare si oricum ma refer la setari care tin de client.

Acum suna interesant?

In ultimul sprint de la Community Help am lucrat la implementarea OpenSearch pentru browsere ca Firefox 2+ si Internet Explorer 7+ care suporta formatul.

Este unul din pasii pe care ii facem sa venim in intampinarea comunitatii si sa facem serviciul de cautare util cat mai multor utilizatori.

OpenSearch este un set de formate open-source care, printre altele, permite agregarea de rezultate de cautare. Community Help foloseste unul din formate pentru XML descriptor files care sunt consumate de browsere pentru integrarea de seach engines in aplicatii.

Firefox incepand cu versiunea 2 si Internet Explorer incepand cu versiunea 7 au suport pentru integrarea de motoare de cautare specializate direct in interfata. La o cautare specifica per produs, Community Help iti ofera posibilitatea sa adaugi un motor de cautare specializat pe produsul selectat direct in interfata browser-ului.

Pentru o cautare pe Flex in Community Help, daca folosesti un browser care suporta OpenSearch, vei fi promptat sa iti instalezi un search engine plugin care iti permite sa refaci cautarile pe Flex mult mai usor, direct din browser.

User prompt pentru instalarea plugin-ului de Flex OpenSearch

Motorul de cautare Adobe Community Help pentru Flex integrat in Firefox 3

Cu putin de magie JS tinem minte ce ai instalat deja si nu te mai intrebam a doua oara. Daca alegi sa inchizi prompt-ul intelegem ca nu vrei sa te mai batem la cap si nu iti mai aratam mesajul pentru ca te deranjeaza. (pentru nici un alt produs)

(Sidenote: API-ul de OpenSearch pentru Firefox este implementat incomplet si gresit de 4 ani. Poate voi avea acordul ca vreodata sa contribui si sa il fixez pentru ca are potential si e pacat sa fie defect.)

Exista posibilitatea pentru power-users sa isi puna keywords pentru anumite seach-uri din setarile browser-ului. Acest lucru poate li se pare mai comod. OpenSearch, evident, nu li se adreseaza.

Daca ai ceva sa ne spui despre Community Help te rog sa ne trimiti niste feedback. Nu e o masina corporatista care triaza mesajele, chiar noi, echipa de dezvoltare, le citim.

Azi au fost emotii imprastiate, de la frica la frustrare, de la panica la extaz.

Azi am facut ultimul release de Community Help dinainte de lansarea CS4 – un release intens care sa te faca sa simti ca traiesti.

Azi se va termina stresul. Diseara totul va fi bine.
Azi va suna a 3 Doors Down – When I’m Gone

“So hold me when I’m here,
Love me when I’m wrong,
Hold me when I’m scared,
And love me when I’m gone.

Everything I am,
And everything in me,
Wants to be the one you wanted me to be.
I’ll never let you down,
Even if I could,
Give up everything,
If only for your good,

So hold me when I’m here,
Love me when I’m wrong,
Hold me when I’m scared,
You won’t always be there,
So love me when I’m gone.”

Cesti de ceai Ctrl+Alt+Delete

I just gotta have one of these!

Da, sunt un Windows kinda guy si aproape mandru de asta. Desi imi astept Mac-ul sa vina sunt destul de sigur ca de fapt imi trebuie o namila quad-core.

Laptopul de serviciu, un Lenovo T61p deloc neglijabil, ia cam 7:30s de la zero la fully-functional workstation. Asta include criptari, parolari, sincronizari, si cateva injuraturi pentru ca a zvarit .NET o eroare la boot.

Suficient timp pentru o cafea intr-una din cestile Ctrl+ALT+Del. Nu sunt un “tee kinda guy” deci serveste-mi endorfinele pe ziua de azi!

PS: quad-core nu e chiar moft, simt nevoia unuia atunci cand ma apuc sa compilez la Flex.

Umbla vorba cum ca la Adobe Romania se coace un serviciu web.

De fapt acum, dupa anuntarea oficiala a datei de lansare pentru CS4, toate lucrurile iau amploare. Micul proiect obscur despre care nu multa lume stia, Adobe Community Help, la dezvoltarea caruia am pus si eu umarul in ultimul an, a inceput sa prinda aderenta.

Presa internationala a inceput sa scrie despre noi, iar statisticile trec prin tavan.

Ce scrie lumea pe web despre Adobe Community Help:
CNET – Adobe’s CS4 gets Google search boost
Google Blog – Adobe users get help with Google Site Search
Google Enterprise Blog – Building community awareness with Google Site Search

Pentru ca este un serviciu web integrat in atat de multe produse din CS4 se gasesc o sumedenie de referinte despre Community Help prin articolele despre noua suita de la Adobe asa ca nu am sa mai continui cu link-uri aici.
O scurta poveste a lui Community Help si a echipei din spatele proiectului gasesti si pe blogul myadobe.ro

De fapt, motorul de cautare cu tehnologie Google nu e singura jucarica de care s-a ocupat echipa in ultima vreme.
Daca e “community” sa fie:

• profile
  Dupa ce ai facut o vizita prin Community Help ca user inregistrat pe Adobe.com, un profil default ti-a fost deja creat.
  Trage o vizita pana in pagina de about si, daca esti logat, ai acces la alte sectiuni printre care si pagina ta de profil. Pentru a vedea profilul unui utilizator este suficient sa dai click pe numele sau dintr-un comentariu pe care l-a postat.
  
  
• comentarii
  Bucata de comentarii, aplicata pe multe sectiuni din site-urile Adobe, este o componenta dezvoltata de multi oameni. La partea de front-end am fost foarte implicat si este o piesa la care sunt mandru ca am participat.Solutia de comentarii este gandita ca “one-ring-to-rule-them-all” si momentan o gasesti pe documentatia de Flex in LiveDocs, pe Developer Center sectiunea Flex si multe alte zone pe care inca nu le-am rasfoit.Cireasa de pe tortul international – toata aplicatia este localizata in 15 limbi.
  Da, asta include interfata pentru comentarii :)
• urmeaza alte feature-uri axate pe comunitate.
  Dar mai mult nu pot sa-ti spun acum. Ai putintica rabdare.

Desigur, pentru ca totul sa mearga bine in fata e nevoie de foarte multa munca in spate.
Ceea ce vezi este doar varful ghetarului. Toata echipa s-a dat peste cap ca sa puna la punct o aplicatie solida si rezistenta in cele mai ciudate scenarii si conditii. Timpul si userii vor spune daca ne-am facut treaba cum trebuie.

La momentul de fata probabil nici noi nu ne dam seama de amploarea si impactul proiectului in contextul CS4 dar e o perioada foarte interesanta si motivanta din perspectiva interesului fata de munca noastra.
Sunt multe de scris dar e prea putin timp.

Vorbim detalii* la bere si o narghilea in curand!
* Evident in conditiile unui NDA :)

Great work isn’t done during work hours. Get over it!
Coming and leaving on time yields only lemmings.

So get off my case with the schedule and leave the damn coffee machine working. It takes ages for the water to heat up and I need my nightly java.

Extract from Faust Pas – Fredo and Pid’jin comic strip.

It is now official, signed and sealed so I can talk about it.

Tudor, one of the two world-ending pigeon creators, is joining Adobe Romania’s office as an XD. XD is short for User Experience Designer.

In short, Tudor will be in charge of designing interfaces of Adobe’s future, kick-ass, applications.

I met with the Adobe folks at the 2 year aniversary party of the Fredo and Pid’jin comic strip. It’s nice to see Tudor join as he played a crucial part (even though he doesn’t know it) in me getting to work with Adobe.

A very warm welcome from me!

I bet you have those days when you find yourself slacking off for hours on end. I do too!
It may be fatigue, illness or just plain old ‘don’t feel like it’.

That’s not really helpful when you have tons of work to do and deadlines on the horizon.

One thing that tricks me into moving my ass and getting things done is the following technique:

At the beginning of the day I have an empty mug on my desk and a pack of post-its.

Read the rest of this entry »

Atentie: acest post este lung si geek-oriented. Daca te plictisesti treci repede la pisica

Am gasit pe Ajaxian “Split the initial payload” – un articol care discuta despre cantitatea de JS care se arunca in pagina la incarcare si cum afecteaza aceasta performanta interfetei.

Sunt sigur ca nu ti se pare normal sa incarci in pagina mai mult JS decat ai nevoie. E bun simt!
Dar incarci mai mult cod decat ai nevoie. Nu-i asa?

Ni se intampla tuturor si nu o facem cu rea intentie. De obicei timpul ne preseaza sau pur si simplu ideea nu sare. Daca nu incerci sa-ti privesti aplicatia in ansamblu ai sa scapi codul de sub control. Asta nu se refera doar la complexitate ci si la dimensiunea fisierului ce va fi incarcat.

Pe masura ce aplicatiile web de azi devin din ce in ce mai complexe si cantitatea de cod aruncata in ele este considerabil mai mare. Mai mult ca sigur nu ai nevoie de tot codul la prima incarcare.

E un truc inteligent sa iti imparti codul ce tine de front-end in bucati pe care le incarci on demand sau asincron in fundal. Desigur e un joc mai complicat odata ce depinzi de incarcarea fisierelor externe. Totusi, prin decizii rationale poti spori performanta aplicatiei tale incarcand in liniste tot ceea ce nu este vital pentru prima rulare.

Dynamic Script Loading

Un fisier JavaScript se poate incarca in pagina prin generarea unui element DOM de tip script caruia ii atribui proprietatea src care indica spre fisierul ce va fi incarcat. Nu uita sa mentionezi tipul fisierului pentru ca browserul sa interpreteze corect datele incarcate.

var script = document.createElement('script');
script.type= "text/javascript";
script.src="path/to/javascript.js" mce_src="path/to/javascript.js"             ;

document.getElementsByTagName('head')[0].appendChild(script);

Ultima linie atribuie elementului head scriptul si face toata magia posibila. Nu e obligatorie incarcarea fisierului in head dar e o buna practica sa faci acest lucru.
Problema intervine atunci cand trebuie sa interactionezi cu datele din fisierul incarcat dinamic.

Pentru ca incarcarea se va face asincron poti avea surpriza ca o functie care foloseste datele din fisierul in cauza sa se declanseze inainte ca fisierul sa se fi incarcat complet. Asta rezulta intr-o eroare urata si probabil functionalitate distrusa.

In Internet Explorer te poti lega de proprietatea onreadystatechange, similar cu apelarea AJAX, si apoi folosesti un event handler bazat pe readystate. Tipurile de raspuns pe care le poti primi de la IE sunt

• uninitialized
• loading
• loaded
• interactive
• complete

Mofturi IE
Internet Explorer 7 e imprevizibil in tipul de readystate pe care il returneaza dupa ce codul s-a incarcat. Uneori poti primi ‘completed’ sau ‘loaded’ in cazul in care operatiunea s-a terminat ok. Sa ai grija sa asculti pentru ambele raspunsuri.

script.onreadystatechange= function () {
if (script.readyState == 'complete' || script.readyState == 'loaded'){
//code here
}
}

Firefox, Safari si orice alt browser care are la baza Geko sau Webkit pot folsi onload. Te poti lega cu aceasta de fisierul pe care il vei incarca si poti rula metode care interactioneaza cu fisierul proaspat incarcat.

script.onload=function(){
//code here
}

In exemplele de mai sus am folosit functii anonime pentru a incapsula codul ce va fi executat cu fisierul incarcat. Desigur ca poti atribui nume de functii deja existente.

O resursa care m-a ajutat mult sa inteleg si sa folosesc metoda asta e JavaScript Madness.
Iti recomand sa citesti articolul de acolo pentru detalii suplimentare la cum e tratat dynamic script loading in diferite browsere.

Avantaje

• Mai putin cod la incarcarea paginii rezulta in performante mai bune pentru aplicatie
• Metoda merge si pentru alte tipuri de fisiere (ex: css) desi nu vad o utilitate rezonabila a acestei metode. Daca trebuie sa incarci dinamic fisiere .css poate e cazul sa-ti regandesti structura stilurilor.Totusi, ai putea incarca in fundal fisiere .css (preloading) pentru paginile pe care presupui ca le va accesa vizitatorul. Din nou, depinde mult de arhitectura aplicatiei tale.

Dezavantaje

• Metoda e suficient de ‘obtrusive’ incat sa nu iti doresti atasarea evenimentelor critice pentru aplicatie de incarcarea unui script extern. Conexiunile se inneaca, fisierele se modifica, intra in cache (neasteptat) sau iti servesc raspunsuri neasteptate.Daca o bucata de cod este critica pentru functionarea aplicatiei pune-o intr-un fisier care se incarca prin metoda clasica: odata cu pagina. (de fapt nu e chiar odata dar o lasam asa de dragul simplitatii)
• JavaScript Madness sustine ca scriptul incarcat in felul acesta nu poate face call-uri de tip POST. Merge doar GET. Eu nu am avut problema asta. Ce-i drept, in implementarea pe care am facut-o am folosit si un PROXY in SWF prin care rutam apelurile. (Cross Domain AJAX intr-un post viitor)