VândPupăză

Problema

Aveam nevoie de o metoda prin care sa carpesc pentru IE6 si alte browsere incapabile de a folosi un atribut CSS.

Solutia

Pentru ca “browser sniffing” e o metoda gresita de a aborda astfel de probleme, mi-am scris o mica functie in JavaScript care detecteaza capabilitatile CSS ale unui browser. Functia returneaza true daca proprietatea este implementata de browser si false in caz contrar.

Mod de utilizare

browser.hasCssProperty("max-height")

Implementare

Metoda e simpla: orice propietate CSS are un corespondent in DOM via style. Ca sa verifici daca browserul implementeaza o proprietate CSS e suficient sa intrebi un element DOM daca style-ul sau accepta acea proprietate.

Diferenta in DOM este ca numele compuse ale proprietatilor sunt camel case (maxHeight) in timp ce in CSS ele sunt separate prin cratima (max-height). Pentru asta a trebuit sa fac o conversie din dash-separated in camelCase.

E important de stiut ca proprietatile pot avea nume compuse din mai mult de doua elemente, de exemplu border-bottom-style. CSS3 aduce multe astfel de nume compuse, chiar cu patru elemente.

Codul e pe github si poate fi imbunatatit. Intentia e sa abstractizez si mai mult implementarea ca sa fac atat object detection cat si css property detection.

Stiu ca acum nu refolosesc elementul de test.
Ar trebui sa fac un singleton.

De-a lungul unui weekend prelungit am apucat sa scriu niste cod pentru sufletul meu si am publicat un plugin de jQuery: tabToggle.

Vezi un demo la http://bitesizebugs.com/lab/jquery/tabtoggle/

Sursa la: http://github.com/oslego/tabToggle/tree/master

Problema

Exista zeci de plugin-uri de jQuery prin care se obtine comportamentul JS de tab navigation, insa majoritatea developerilor au fost prea zelosi. Desi urmaresc acelasi behavior plugin-urile pe care le-am studiat vin la pachet cu multe alte functionalitati gen efecte vizuale, ajax calls, actiuni multiple pentru acelasi click sau impun o conventie de naming de tipul: “#tab_1″ declanseaza “#tab_content_1″.

Aceste workflow-uri fie iti fac munca enervanta (naming conventions) fie inseamna fisiere inutil de greoaie (12+ kb). Toate astea cand vrei doar un meniu de tip navigation.

Ideea

Am avut nevoie de un plugin simplu de tab navigation asa ca mi l-am scris: jquery.tabToggle.js.

Cand folosesti tabToggle iti selectezi prin jQuery un set de elemente care actioneaza drept triggers (tab-urile) si le atribui un alt set de elemente care joaca rolul contiutului corespunzator fiecarui tab (targets).

Atat! Fara conventii de nume, fara obligatia de a lucra doar cu UL-uri sau alte forme de ingradire a strucurii. Singura conditie este ca numarul de triggers sa fie egal cu numarul de targets – un aspect logic, de bun simt :)

Vezi exemplul de cod de pe pagina de demo pentru detalii tehnice.

Pentru moment singurul behavior este de visibility toggle a targetului atunci cand faci click pe trigger-ul corespunzator. Am vrut ca tabToggle sa fie simplu si la obiect.

Pentru flexibilitate intentionez sa expun public in JavaScript metodele care se ocupa de managementul elementelor ca sa iti poti defini orice efect sau behavior iti doresti.

Nu vreau sa iti limitez creativitatea cu tabToggle. Vreau doar sa iti ofer functionalitatea de baza pentru un meniu de tip tab navigation. Nu intentionez sa extind tabToggle cu support pentru AJAX calls sau sa definesc animatii intre tranzitii. Exista deja plugin-uri care fac asta.

Il aveam scris de mai demult dar in cursul weekend-ului l-am curatat, l-am documentat, l-am testat si l-am dat comunitatii sub forma de cod open source. In versiunea minified codul are sub 1kb deci va lasa o urma foarte mica asupra bandwidth-ului consumat.

Git – version control

Cu ocazia asta am invatat sa folosesc si git – un sistem de version control. Am cont pe github si mi-a placut ca mi-a dat version control, wiki, si bug tracker, gratuit, in acelasi pachet.

Partea cea mai gustoasa la git este considerata usurinta in operatiunile de fork si merge ale repository-ului – o componenta cheie in proiectele la care lucreaza mai multe persoane.

Mai mult open source

Dupa ce l-am facut public am primit mai multe aprecieri din partea prietenilor. Asta m-a incurajat sa pregatesc pentru publicare si alte bucati de cod JavaScript sub forma de jQuery plugins.

Daca ai ceva de spus esti binevenit sa lasi un comentariu.
Daca observi functionalitate gresita te rog sa deschizi un issue pe github ca sa il pot investiga si/sau repara.

Licenta?

Codul e open source deci il poti folosi fara obligatii in orice proiect. Nu ma pricep la licente asa ca poti folosi acest plugin atat in proiecte personale cat si comerciale fara obligatii.

Intentionez sa public viitoare plugin-uri sub licente MIT si GPL, la fel ca licentele pentru jQuery.

Intrebare pentru cei mai priceputi juridic: exista o alternativa de licenta mai potrivita pentru acest tip de cod?

Am incercat sa ies cu prietenii la o bere alba nefiltrata in Bucuresti dar cum rezervarile in capitala se fac inca de pe la jumatatea saptamanii am sfarsit prin a ne aduna la iLL acasa.

Monopoly fara un zar

La om acasa ne-am pus sa jucam un Monopoly dar oroarea de pe lume a facut sa avem doar un zar fizic. Aici ne-a lovit problema existentiala:

• facem inca un zar din miez de paine?
• coboram si cumparam un zar de la o benzinarie?
• dam cu zarul de doua ori?

Painea ar fi durat mult pana se intarea, nimeni nu avea chef sa coboare la vanatoare iar datul de 2 ori cu zarul nu ar fi fost practic.

Geeks unite!

Vlad a fost scanteia si s-a pus sa faca un script ce imita functionalitatea a doua zaruri in JavaScript pentru Monopoly, acolo la fata locului. Stiu ca iLL si Mimoza ne implorau sa cautam pe net un script de zaruri dar nu ar mai fi fost distractiv.

Vlad a scris primele linii, neoptimizat desigur + bug de random. Eu am intervenit, i-am fixat bug-ul, i-am wrap-uit codul duplicat intr-o singura metoda explicand ca se face mult mai usor debugging-ul asa (avea doar 3 linii), am bagat un total, putin markup HTML si am introdus un alt bug :)

Ne-am invartit in jurul cozii putin din caza bug-urilor, iar Vlad a fost revelatia: JS-ul il punem la capat ca sa nu mai facem event listener pe window.onload. Dracovenie!

Jamayk a intervenit si a dat personalitate paginii anoste cu niste CSS, iar eu am adaugat coltul norocos.

In incercarea de a pastra experienta zarurilor cat mai naturala, in loc sa sufli in zaruri am rezervat un colt de ecran unde poti scuipa pentru noroc. iLL nu ne-a lasat sa ii scuipam pe televizor.

Coltul norocos – televizorul e in continuare curat

Vlad a adus cireasa de pe tort si a programat “datul cu zarul” la click asa ca am folosit mouse-ul wireless pe post de trigger pentru zar pe care l-am plimbat apoi din mana in mana in jurul tablei de joc. iLL nu s-a sinchisit sa isi mute senzorul de la mouse intr-un loc mai vizibil asa ca am avut ocazia sa vedem multe acrobatii pentru a “da cu zarul”. In final a imitat efortul fizic al datului cu zarul.

Jamayk cu mouse-ul pentru zarul digial

Jocul a fost distractiv, iar Jamayk a fost un latifundiar pana la capat si ne-a lasat fara bani dupa ce am jucat 1/2 din joc dupa o regula care i-a permis sa ne usuce financiar.

Sa il ingropam in bani pe Jamayk

Demo zaruri pentru Monopoly

Rezultatul se alfa hostat la iLL si puteti apela cu incredere la radomness-ul zarului.
Scriptul arata totalul celor 2 zaruri si daca s-a dat dubla (valorile zarurilor aruncate sunt identice).

Nu este cel mai bun/optim/curat cod pe care l-am putea scrie dar ne-a rezolvat problema si a fost interesant sa ne vedem lucrand impreuna la acelasi lucru.

Da, a fost si foarte fun! Uite un slideshow cu niste poze de la Monopoly la iLL:

Urmeaza sa construim si o versiune masluita pentru a ne face putred de bogati de pe urma celor care vor rezultate preferentiale.

A scris si iLL despre seara noastra la Monopoly.

Morala

Nu pleca niciodata la jocuri de societate fara tocilarii de serviciu.

Filament este un sponsor al jQuery UI si anul acesta organizeaza un concurs pentru cea mai interesanta (creativa) implementare a framework-ului de UI intr-un proiect.

Implementarea poate sa fie intr-un proiect de sine statator sau intr-un demo, doar de dragul concursului. Nu exista limita la numarul de idei pe care le poti trimite.

Castigatorul primeste access gratis la SXSW Interactive 2009, mega eveniment pentru oameni creativi in domeniul IT.

Mi-as fi dorit o saptamana de joaca in compania lui jQuery UI dar timpul nu imi permite. Si la SXSW intentionez sa ajung odata in viata.

Castiga tu si trimite-mi niste poze de la SXSW!