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.

Evenimentul a fost ok. Parca nu la fel de intens precum alte editii.
Am apucat sa-mi prezint gandurile imprastiate despre cross-domain AJAX desi nu am acoperit toate colturile.

Unii au fost interesati de capabilitatile din HTML 5.0 despre care nu puteam spune multe, pentru ca nu m-am documentat. M-a scos Dragos, coleg de la AIR, care a prezentat mai in detaliu de ce e asa de strict browser security model-ul, si a dat cateva detalii despre HTML 5.0

Me looking like a fuckin’ prancing pony @ Wurbe 14

Prezentari

S-a incercat un live streaming de la eveniment dar au dat peste noi problemele de sunet.

Programul a fost dinamic, si cu ajutorul lui Andrei Bocan (cel cu JS care nu omoara rozatoare de talie mica) care a facut o prezentare dementiala!

Andrei Bocan @ Wurbe 14

Mi-a placut in mod deosebit prezentarea lui Alexandru Badiu (Programare functionala in Javascript) care a detaliat cateva din bonusurile si ascunzisurile javascriptice in stil Douglas Crockford.

Cred ca si prezentarea lui Givan Ziadin (Debugging and profiling javascript) ar fi fost mult mai interesanta daca nu ar fi avut probleme tehnice. Mie chiar mi-a placut ce am vazut legat de XUL.

La final Andrei Dragomir (Adobe insider) ne-a uimit cu framework-ul CakeJS pentru lucrul in Canvas. Animatii, mouse-aware behavior, lucru cu full SVG, totul in JavaScript, in browser. OMFG!!!11 pentru cunoscatori.

Flashy fara Flash

Rectangle demo in CakeJS

Organizatorice

Din nou s-au inscris buluc o gramada si au venit mult mai putini. Stiu sigur, in detrimentul altora, care ar fi fost mult mai interesati.
Va tinem minte pe data viitoare!

Sidenote: probabil un sistem de confirmari cu o zi inainte de eveniment ar fi o solutie pentru a mai face loc si altora.

[In curand poze de la eveniment si link-uri la prezentari.]

Later update:
Set de poze Wurbe 14 pe Flickr

Hai neamule la Wurbe #14!

Am sa zic si eu doua vorbe despre cross-domain AJAX, iar celelalte prezentari se anunta interesante.

Personal mi-a placut titlul prezentarii lui Andrei Bocan – “Javascript unobtrusive in diverse framework-uri, cum sa faci js fara sa omori rozatoare de talie mica“.

Wurbe se tine la Adobe Romania, in Anchor Plaza la etajul 9, luni 6 Octombrie incepand cu ora 18:00.

Stire mare pe blogul jQuery – Nokia si Microsoft adopta jQuery drept mediu de dezvoltare pentru platformele lor de JavaScript.

Microsoft va integra jQuery pe langa ASP.NET Ajax Framework (*cough* never heard of it) pe care o va extinde cu plug-ins.

Nokia adopta jQuery drept mediu primar de dezvoltare JS pentru runtime-ul sau bazat pe WebKit, ce urmeaza sa fie integrat si in telefoanele viitoare.

Nici Microsoft, nici Nokia nu vor altera codebase-ul de jQuery dar simpla adoptie a acestui framework de JavaScript inseamna recunoastere suplimentara (cu greutate!) a capabilitatilor sale geniale.

jQuery nu este un framework de widgets dar ofera un miez puternic (selectori pana la CSS3, uniformizare de browser behavior, simplificarea operatiunilor de tip AJAX, etc.) si o arhitectura light (~15kb minified & gzipped) peste care se poate construi foarte usor.

A, mai e si foarte rapid!

• Vineri 3 octombrie ma gasesti la petrecerea Webstock
• Luni 6 octombrie, daca totul merge bine, am sa vorbesc despre cross-domain AJAX la Wurbe #14

Webstock

“Eveniment de o zi ce include conferinte si workshop-uri despre blogging si web 2.0, urmate de o gala a celor mai bune proiecte din Noul Internet” mai multe despre Webstock

Wurbe

“Wurbe (web urbe) este grupul dezvoltatorilor web din Bucuresti.” mai multe despre Wurbe

Am gasit un ceva care imi permite sa “experience Windows Vista without changing your PC”. Trebuia sa fie vorba de un demo in browser.

Undeva, ceva nu a mers bine. Click pe poza pentru imagine mare.

Da, evident ca folosesc Firefox 3 si nu infectia Microsoft numita IE care foloseste ActiveX – o carpeala pentru care au fost de multe ori in procese.

Sincer ma asteptam la un prompt “instaleaza Silverlight” (echivalentul Microsoft pentru Adobe Flex), dar nici macar tehnologia asta nu e promovata cum trebuie.

Evident ca a scuipat o eroare de JavaScript.
Stai linistit! Asa functioneaza produsele Microsoft.
Sper ca ai observat ca s-a facut un call de tip POST la linia 5200 (!!!)

Presupun ca ar fi fost mai cinstit un tagline “experience Windows Vista without changing your PC, but switching your browser back to ours. Please! Pretty please!”

Later update:
Dupa ce mi-am terminat “experienta” am fost invitat sa particip la un survey. Vroiam sa le scriu de bine si sa le propun Siverlight pentru dracovenie. Dar in textarea unde scriam, cand am apasat enter ( punct si de la capat) mi s-a trimis formularul. Evident ca acum nu ma mai invita sa il recompletez.

Pana aici!
Microsoft, ia pula!

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)

I had a recent problem when using some values passed on after a JSON eval(). The situation was simple: compare two numbers out of the JSON then take a course of action based on the result.

Always make sure you are using the correct data type!
If you think you are using numbers, make sure they’re not strings by passing them through either parseInt() or Number() .
You can check for the data type using the JavaScript typeof operator.

The JSON format implies that you send / receive a valid string. So any reference to numeric values might be changed to strings in the process, depending on your JSON’s structure.
Checking for the correct data type will save you a lot of time and it will keep your WTF count to a minimum.

Important note:
eval() is dangerous! It means converting string to script.
This means interpreting and running whatever you pass on to it
(no security checks whatsoever)!

Use eval() only when you are totally in control of what goes into it.
Even then, be cautious!

WTF count
When someone else looks over your script the WTF count can be a good code quality indicator :)

During the past few moths I’ve been working closely with Java Script and other web-related technologies.

Because I feel I gained a lot of knowledge from other blogs and forums I believe I should join in and share some of the things I learned over time.

I decided to start a tutorials section on this blog and I’d like to know your opinion on how you’d like content delivered. I’ll try to steer clear of basic examples and just share some interesting methods, tips and tricks I learn over time. Future content will assume you have at least some basic knowledge of web concepts and technologies.

So, do you prefer:

A. Detailed tutorials like smart use of the Java Script substr() method
B. Hands-on examples like the ones on W3Cschools.com with TryIt Editor. + source files.

Feel free to leave your opinion and preference in a comment.

I do have a busy work life so I can’t guarantee frequent posting but, over time, I’ll try to put together a decent resource with tutorials, examples, tips and tricks.

All tutorial content will be in English in order to effectively reach a wider audience.