User-defined HTTP callbacks for push, pipes and plugins

De mult n-am mai fost atat de entuziasmat de o chestie noua legata de servicii web. Sa va zic de ce. In momentul asta, API-urile ofera output la cerere. Daca vrei sa faci ceva cvasi-realtime, trebuie sa apelezi la eterna metoda de polling (din x in x secunde intrebi API-ul “are we there yet?”).

Web hooks propun un sistem de declansare de eventuri pe web. Pe serverul meu am o adresa, sa zicem idevelop.ro/trigger/. In setarile serviciului cu care vreau sa ma leg (sa zicem Twitter) configurez un web hook cu adresa idevelop.ro/trigger/. In momentul in care eu fac ceva pe Twitter, acesta trimite prin POST un obiect JSON cu detaliile eventului catre adresa setata de mine, de unde eu preiau informatiile legate de event si fac ceva cu ele. Cum ar fi sa le dau mai departe la alte webhooks ;).

• http://blog.webhooks.org/
• http://blog.webhooks.org/about/
• http://webhooks.pbworks.com/

19 Aug 2009: CNN
Strangers gather on Web to make collective art

21 Aug 2009: The Telegraph
‘Longest poem in the world’ written on Twitter

24 Aug 2009: Adevarul
Cum se scrie cea mai lunga poezie

24 Aug 2009: MediaFax
Un roman a realizat un program care scrie cea mai lunga poezie din lume, de pe Twitter

25 Aug 2009: Gandul
Poezii din pixeli pe Twitter, inventia unui student roman

25 Aug 2009: Zeit Online
Automatisches Gedicht aus Twitter-Zeilen

25 Aug 2009: Antena 3
Un student roman a inventat programul care compune cea mai lunga poezie din lume cu postari Twitter

The Longest Poem in the World, my experiment that I previously told you about was just featured in an article on CNN Technology.

Strangers gather on Web to make collective art.

Enjoy :)

Quizoo este un joc trivia pe twitter. O data la cateva minute se pune o intrebare de cultura generala. Urmaresti userul @quizoo, astepti o intrebare noua si apoi raspunzi printr-un reply de forma “@quizoo raspuns”. Cel care a raspuns primul corect primeste un punctaj in functie de cat de rapid a fost. Identitatea proiectului a fost creata de colegul meu Alex Buga.

Pentru clasamente si alte informatii vizitati pagina proiectului.

Aseara, 23 februarie, s-a tinut a treia editie Geek Meet Craiova, organizata de asociatia PR Patrat. Prezentatorii au prezentat frumos, intrebatorii au intrebat frumos. Eu am vorbit un pic prea tehnic, cred ca am si auzit pe cineva sforaind la un moment dat, dar n-am ce sa-i fac. Partea buna e ca am fost invitat sa prezint aceeasi chestie la Geek Meet Cluj, candva spre sfarsitul lui martie. O sa fac tot posibilul sa ajung :).

Scalarea aplicatiilor web

Oamenii de la TextWise au creat un motor puternic de analiza semantica pe text si ofera 1 milion de dolari celor care vin cu idei solide pentru diferite moduri in care ar putea fi implementata aceasta tehnologie. In principiu algoritmul analizeaza textul si genereaza “Semantic Signatures”, clasificari ale subiectelor abordate in acel bloc de text. Cam ce face si Google AdSense.

SemanticHacker.com is home of the TextWise SemanticHacker API and we’re bold enough to call it the world’s first open API for semantic discovery.

The SemanticHacker API generates Semantic Signatures. A Semantic Signature is a representation of ALL concepts covered in a block of text. Each block of text contains semantic dimensions with associated weights. The dimension weights capture the strength of each concept in the block of text.

Ce presupune concursul:

What will make you a winner in the SemanticHacker Innovators’ Challenge?

Develop a software prototype, business plan or both that will have demonstrable commercial viability and the potential for significant financial impact on the application space to which it is applied.

Premiul este acordat in transe: 100.000$ in momentul acceptarii ideii si ceilalti 900.000$ din castigurile generate de respectiva idee dupa implementare.

Mai multe detalii, precum si posibilitatea de a testa tehnologia TextWise, gasiti pe site-ul SemanticHacker.

Cum maine seara voi avea o prezentare despre acest subiect la intalnirea Wurbe #7, am zis ca n-ar strica sa-mi sintetizez ideile printr-un post pe blog :).

Microformatele sunt un set de standarde deschise (oricine poate propune un draft nou) prin care se defineste un sistem de marcare a informatiilor relevante despre un anumit lucru: persoana, eveniment, CV, etc. Ce inseamna asta mai pe romaneste? Inseamna ca daca eu imi fac pe site o pagina separata in care imi pun in format HTML CV-ul, el va putea fi citit in primul rand de catre oameni, pe cand un program nu va sti sa faca ordine si sa dea un sens acelor propozitii scrise de mine in CV, fara sa mai punem la socoteala faptul ca un CV poate fi scris in romana si altul in engleza.

Microformatele vin si propun un set de nume de clase prin care se marcheaza si clasifica o bucata de text ca fiind ceva relevant, indexabil, semantic: numele unei persoane, numarul de telefon, data si locul unei intalniri, un item din experienta mea profesionala.

Exemplu concret de text formatat conform standardelor hCalendar si hCard, care descrie intalnirea Wurbe de luni:

<div class="vevent">
	<h3 class="summary">Intalnirea wurbe #7</h3>
	<p class="description">Veniti cu totii luni la intalnirea dezvoltatorilor web din Bucuresti!</p>
	<p>Intalnirea incepe la <abbr class="dtstart" title="2008-03-17T18:00:00+02:00">6 seara</abbr> si tine pana <abbr class="dtend" title="2008-03-17T23:00:00+02:00">tarziu in noapte</abbr>.</p>
	<p class="vcard">Va avea loc la
	<span class="location">
		<span class="fn org">sediul Adobe din cladirea Anchor Plaza</span>,
		<span class="street-address">B-dul Timisoara nr. 26</span>,
		<span class="locality">Bucuresti</span>,
		cod postal <span class="postal-code">061331</span>,
		<span class="country-name">Romania</span>.
		Ne gasiti la emailul <a href="..." class="email">contact@domain.com</a>
	</span>
	</p>
</div>

Acest cod HTML pus in pagina va arata asa:

Intalnirea wurbe #7

Veniti cu totii luni la intalnirea dezvoltatorilor web din Bucuresti!

Intalnirea incepe la 6 seara si tine pana tarziu in noapte.

Va avea loc la sediul Adobe din cladirea Anchor Plaza, B-dul Timisoara nr. 26, Bucuresti, cod postal 061331, Romania. Ne gasiti la emailul contact@domain.com

Desi textul are o exprimare dubioasa chiar si pentru limba romana, el contine totusi toate informatiile necesare la localizarea sa absoluta in timp si spatiu.

Acele clase speciale, asociate fiecarei bucati de text, sunt definite in wiki-ul microformats.org. “fn” inseamna “formatted name”, iar “vevent” si “vcard” definesc tipul de continut din interior. Structurand aceasta bucata de text folosind sistemul de clase microformats, i-am dat un sens. Nu mai este doar o insiruire de cuvinte, ci este un eveniment, ale carui detalii pot fi citite si indexate fara probleme de alte site-uri si ii asigura o portabilitate care trece peste limitarile de limba, exprimare, etc.

Exista mai multe standarde in acest moment, printre care: hCard (definirea de persoane, locuri si organizatii), hResume (CV-uri), hCalendar (evenimente), hReview (recenzii la produse, servicii, evenimente), XFN (reteaua de prieteni si relatia cu fiecare).

Dupa cum se observa, microformatele sunt gandite pe sistemul de clase HTML deja existent, ceea ce asigura o portabilitate foarte mare. Daca eu si alti 10 oameni ne-am scrie cate un CV pe site-urile personale, fiecare folosind alta ordine, alta formulare, limba si structura HTML, dar toate compatibile cu standardul hResume, ar putea aparea apoi un site care sa indexeze toate aceste CV-uri intr-o baza de date.

Microformatele sunt deja folosite pe multe site-uri sociale (facebook, twitter, flickr, wordpress, yahoo, linkedin, google maps, digg, you name it…) si exista implementari de clase pentru parsarea / generarea formatelor uzuale. Un exemplu de aplicatie directa este transferarea fara efort a datelor personale de contact si listei de prieteni de pe o retea sociala pe alta.

Further reading:

• Microformats home
• Vitamin: Add microformats magic to your site

“Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.” – Antoine de Saint-Exupery

Folosesc Firefox si middle-click pentru deschiderea in taburi noi a linkurilor care ma intereseaza. Insa in ultima vreme ma lovesc din ce in ce mai des de o problema: eu pe care buton apas?

Sa va explic.

O data cu raspandirea “fenomenului AJAX“, tot mai multe site-uri folosesc javascript pentru afisarea unor informatii intr-un mod mai “prietenos”. Astfel, un link pe care scrie “Help”, din dreptul unui camp dintr-un formular, poate deschide o fereastra popup, poate afisa un fel de lightbox, poate deschide intr-un tab nou o pagina cu informatiile necesare, etc. Posibilitatile sunt multe.

Problema este ca acel buton este imprevizibil.
Vad butonul, cum procedez? Left click, sperand sa fie ceva javascript, dar riscand sa imi schimbe pagina (lucru pe care eu nu-l doresc, poate e un formular deja aproape completat), middle click “ca sa fiu sigur” dar apoi ma trezesc cu 10 taburi deschise, fiecare tab fiind gol deoarece acel link fusese “gandit” (mult spus) pentru javascript? E foarte neplacut sa se intample asta, iar mai grav este ca aceasta nesiguranta devine din ce in ce mai prezenta pe web.

Exemplu concret: forumul macuser.ro. Toate pozele atasate la un post au link de forma javascript:showimage('http://..', '640', '480');void(0);. Vrei sa deschizi toate pozele in taburi ca sa te uiti la ele pe rand? Sau poate un link direct catre una din ele? Tough luck… Ai cumva javascriptul dezactivat? Hah.

Avem nevoie de programare web “cu cap”, facuta de oameni care stiu cum stau lucrurile, si nu de amatori care cred ca daca folosesc din plin ultimele efecte script.aculo.us totul va fi ok. Nu e ok, site-urile trebuie sa fie accesibile, informatia trebuie sa se gaseasca in stare cat mai pura. De-aia avem XML, JSON, XHTML: pentru “curatarea” informatiei de toate artificiile grafice. Javascriptul ar trebui sa fie bonus, nu esential! Vorbim bineinteles de site-uri normale, nu de aplicatii full-javascript. Cum poti sa te numesti programator web, dar sa scrii un formular de cautare in care submitul se face doar prin javascript? Chiar nu iti dai seama ca i-ai terminat pe toti cei care intra de pe terminale non-standard? Sau e nevoie sa intri chiar tu intr-o zi de pe un telefon mobil, intr-un moment de urgenta, sa cauti ceva pe un site, si sa nu poti sa faci asta pentru ca respectivul programator nu a pus buton de submit. “Pentru ce? Nu poate sa dea enter?”. Nu.

Asadar, un site trebuie sa functioneze 100% chiar si cu javascript dezactivat. Iar atunci cand este activat, sa nu fie nevoie sa am grija unde dau click pentru a nu naviga de pe pagina curenta unde am informatii importante. Vreau sa am incredere ca acel click pe care il fac pe linkul din meniu nu imi va strica experienta navigarii pe site. Acest lucru se cheama “non obtrusive javascript”, iar directia spre care ar trebui sa tindem toti se cheama “accesibilitate”.

Introducere

Aplicatiile web se bazeaza din ce in ce mai mult pe javascript pentru transferul de informatii intre serverul web si browserul vizitatorului. Aceste informatii pot fi trimise fie plain-text, fie serializate intr-un obiect JSON, fie intr-o structura XML. Pentru ca datele trimise de server sa poata fi utilizate in cadrul javascript-ului, ele trebuie extrase cumva din string-ul responseText. Aceasta operatie de extragere a informatiilor dintr-un text care respecta o anumita sintaxa (bine definita) se cheama parsare.

Cum ii spune si numele, JSON este o notatie, o sintaxa care descrie felul in care sunt incapsulate obiecte (array-uri, stringuri, numere, etc) intr-un anumit format, dupa reguli bine stabilite.

XML-ul nu este un format nativ javascript, sintaxa lui nu are sens intr-un cod sursa .js, de aceea este nevoie de un set de functii in plus pentru extragerea datelor venite in acest format, ceea ce mareste timpul de procesare.
Sintaxa JSON insa, este perfect compatibila cu javascript. Stringul primit de la server nu trebuie decat evaluat (cu functia eval()) si este automat transformat in variabila. Nu este necesara folosirea niciunei librarii externe. Functia eval() executa stringul dat ca parametru ca si cum ar fi cod javascript.

Un exemplu de string cu sintaxa JSON:

{
	"numeMagazin" : "SC Gigel impex SRL",
	"produse" : [
		{ "nume" : "Tricou", "cantitate" : 2, "pret" : 120 },
		{ "nume" : "Telefon", "cantitate" : 6, "pret" : 500 },
		{ "nume" : "Creion", "cantitate" : 10, "pret" : 20 }
	],
	"adresa" : "Strada Primaverii nr. 3"
}

O structura echivalenta in XML ar fi:

<?xml version='1.0' encoding='UTF-8'?>
	<numeMagazin>SC Gigel impex SRL</numeMagazin>
	<produse>
		<produs>
			<nume>Tricou</nume>
			<cantitate>2</cantitate>
			<pret>120</pret>
		</produs>
		<produs>
			<nume>Telefon</nume>
			<cantitate>6</cantitate>
			<pret>500</pret>
		</produs>
		<produs>
			<nume>Creion</nume>
			<cantitate>10</cantitate>
			<pret>20</pret>
		</produs>
	</produse>
	<adresa>Strada Primaverii nr. 3</adresa>
</xml>

Utilizare

Dinspre PHP, un string valid JSON se poate genera manual, dar cel mai usor este sa folosim o clasa care stie sa transforme orice variabila PHP (simpla, array, etc) direct in sintaxa JSON, gata sa fie trimisa browserului. Incepand cu versiunea 5.2.0, PHP vine cu o extensie care se ocupa atat de codarea cat si de decodarea obiectelor JSON. Pentru versiunile mai vechi de PHP se poate folosi o clasa din multele disponibile.

Exemplu de utilizare din PHP, folosind functia json_encode(), disponibila in PHP 5.2.0:

$array = array(
	"persoana" => array (
		"nume" => "Andrei",
		"varsta" => 20,
		"email" => "andrei@idevelop.ro"
	)
);

echo json_encode($array);

{"persoana":{"nume":"Andrei","varsta":20,"email":"andrei@idevelop.ro"}}

In javascript, dupa cum am spus, ne ajuta foarte mult suportul nativ. Deoarece acel string este, in esenta, o instructiune javascript, el nu trebuie decat evaluat si devine automat o variabila.

var rezultat = eval('(' + ajax.responseText + ')');
// in acest moment, "rezultat" este un obiect javascript
alert(rezultat.persoana.nume); // va afisa "Andrei"

Obiectul astfel obtinut poate fi parcurs exact ca orice array, elementele sale putand fi la randul lor array-uri, etc. Pentru primul exemplu, cel cu magazinul, afisarea tuturor produselor se poate face in felul urmator:

var magazin = eval('(' + ajax.responseText + ')');
for (var k=0; k<magazin.produse.length; k++) {
	alert(magazin.produse[k].nume);
}

Pentru a vedea pe viu ce si cum se intampla, am creat o pagina demonstrativa:

Exemplu de utilizare JSON: un exemplu de prelucrare a unui string JSON

JSON versus XML

Cum am vazut, atat JSON cat si XML nu sunt decat sintaxe in care sunt invelite, intr-un mod structurat, informatiile. De ce am folosi unul si nu celalalt? Ca de obicei, parerile sunt impartite si exista avantaje si dezavantaje in ambele cazuri.

Avantajele JSON

• Parsarea unui obiect JSON in javascript este mult mai rapida decat parsarea acelorasi informatii impachetate intr-o structura XML, datorita suportului nativ.
• Parcurgerea informatiilor obtinute este de asemenea mult mai usoara decat folosind functii XML gen childNodes() sau nextChild().
• Datorita sintaxei simple, dimensiunea unui raspuns AJAX in forma JSON va fi mult mai mica in comparatie cu un XML stufos, cum puteti vedea si in exemplul de mai sus.

Avantajele XML

• Este mult mai raspandit, exista multe implementari de parsere si generatoare pentru majoritatea limbajelor de programare existente
• XPath, XSLT

Securitate

Atata timp cat sunteti siguri ca serverul care trimite datele in format JSON este de incredere, totul este ok (desi, teoretic, este posibil ca pachetele sa fie interceptate intr-un punct intermediar si inlocuite cu altele, deoarece informatiile sunt trimise plain-text, fara criptare).

Daca insa trebuie sa parsati cod venit de la un alt site (cum trimite, de exemplu, jobber pentru widgetul sau) asupra caruia nu aveti control, pot aparea probleme de securitate. Daca cineva compromite serverul jobber si introduce in codul javascript trimis spre widget instructiuni malitioase, acestea vor fi executate de catre functia eval() in browserul vizitatorului. In acest caz, pentru intarirea securitatii, este bine sa folosim un JSON Parser, o functie care parseaza doar codul JSON din textul primit, ignorand instructiunile javascript.

O alta problema de securitate este javascript hijacking, dar mai multe despre asta intr-un articol viitor :).

Linkuri utile

• JSON.org
• The AJAX response: XML, HTML, or JSON?
• JSON for the masses
• Wikipedia: JSON

Urmaresc de ceva vreme acest editor, si am sperante mari pentru el. Seamana foarte mult cu TextMate (disponibil doar pe OSX), iar cei care folosesc acest editor stiu sa-l aprecieze :). Nu e un monstru de aplicatie ce se incarca in 10 secunde si ocupa 50mb in RAM, nu are 100 de feature-uri complexe, dar cele pe care le are iti usureaza munca fantastic.

Ce imi place la el:

• Se incarca foarte repede
• Multi-Selections, rectangular selections
• Snippets
• Multi-Insert
• Find and Replace cu suport RegEx

Multe din aceste feature-uri le puteti vedea in actiune fie pe site-ul lor, fie in screencasturile TextMate.

E-TextEditor este un alt editor foarte asemanator dar care se bazeaza pe Cygwin (deci se incarca greu) si care este pe bani.

Pana acum foloseam Notepad++, dar daca totul merge ok in cele cateva zile de testing, voi trece pe Intype.