VândPupăză

Am fost mai devreme de mi-am cumparat o “lopățoancă” pentru zapada. Am dat cu spor si m-am descotorosit de zapada adunata imprejurul masinii.

Mi-au trebuit vreo 20 de minute pentru ca am tinut sa fie treaba facuta cu simt de raspundere si nu am aruncat zapada pe locul vecinului sau in strada. In plus, era zapada si gheata acumulata de 7 zile. Mi-a si placut pentru ca a fost masina mea.

O mini-afacere

Acum cateva saptamani ma uitam la bietii oameni care jeleau de frig incercand sa-si scoata masinile din zapada ca sa ajunga la serviciu. Si ma gadeam ca exista atatia baieti vanjosi care stau si zac toata ziua, si se plang ca n-au bani.

Uite o idee simpla:

• ia un prieten si doua lopeti – o investitie de maxim 30 ron
• mergi in parcare langa soferii inzapeziti
• si propune-le sa le deszapezesti masina in 10 minute pentru 10 RON
• optional dar o nota de clasa: ofera-le, gratis, un ceai fierbinte din termosul pe care il ai in rucsac
• daca omul e multumit de servicu, lasa-ti numarul de telefon. Poate la viitoarea zapada ai deja un motiv de bucurie.

Nu e o afacere de milioane si nici una cu perspective de viitor dar e un gest care iti poate aduce niste bani de-o bere! Cred ca sunt oameni care ar prefera sa plateasca 10 RON pentru luxul de a sta la caldura in masina in timp ce altcineva le faci treaba grea. Ceai / cafea incluse in pret! ;)

Trebuie sa fii creativ si dispus sa muncesti.

Am incercat sa fac un video tragand o rafala de poze la intervale bine definte de timp. Acest tip de video se numeste time-lapse.

Video-ul este compus din 150 de poze separate trase la interval de 10 secunde fiecare.
E dovada unui time-lapse video de amator pentru ca am facut doua greseli mari:

• Nu am blocat expunerea
  Din cauza asta cantitatea de lumina variaza intre cadre – un aspect deranjant la un time-lapse.
• Am tras printr-o fereastra
  Nu am avut de ales, dar am gresit pentru ca am tras cadrele dintr-o incapere puternic iluminata. Pe masura ce lumina ambientala s-a diminuat au inceput sa se observe reflexiile din geam.

  In urmatorul time-lapse am sa urmaresc fie o incapere in care lumina ramane constanta fie evit sa mai trag prin geam.

Eu sunt un amator in time-lapse video si fotografie in general. Dar exista niste oameni foarte talentati care si-au pus creatiile pe un canal time-lapse HD pe vimeo. Mi-au placut foarte mult cele de la The Seventh Movement:

Conținutul “Lighting 101” de pe Stobist a fost tradus în limba română. Manualul este foarte bun pentru un necunoscător într-ale tehnicii și terminologiei iluminatului în fotografie.

Strobist este pseudonmul lui David Hobby, un fotograf respectat care se ocupă de fotografie comercială și fotojurnalism sportiv. El publică des conținut pe http://strobist.blogspot.com cu review-uri și tutoriale legate de iluminatul în fotografie.

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.

In ultima vreme am acordat o atentie deosebita pentru CSS Image Sprites incercand sa gasesc solutia optima pentru proiectul la care lucrez. Pe drum am descoperit niste resurse interesante:

• Am gasit pe blogul Mozilla Webdev un articol foarte bun referitor la pozitia si logica aranjarii imaginilor intr-un sprite – foarte informativ, il recomand.
• In libraria imagemagick exista functia montage care permite imbinarea automatizata de surse intr-o singura imagine; are multe moduri de customizare si o gasesc foarte utila atunci cand lucrezi cu multe spre foarte multe imagini de acelasi dimensiuni (icons) iar sprite-ul evolueaza des prin adaugarea sau eliminarea de imagini.
• Google e foarte nazist in materie de CSS Image Sprites in sensul ca optimizeaza la maxim spatiul utilizat dar foloseste niste metode “nu-prea-web-standards” pentru a afisa continutul imaginii: elemente <span> in scop decorativ, goale, fara continut:

  
  <span class="csb ch" style="background-position:-76px 0;
  margin-right:34px;width:66px"></span>
  

  Folosind aceasta metoda developer-ul nu isi mai face griji pentru imagini care apar din greseala ca background din cauza supradimensionarii elementului caruia ii este atasat sprite-ul. Asta se intampla fiindca are control fin asupra dimensiunilor acelui <span> decorativ.

  <flame> Nu sunt neaparat impotriva acestei metode dar cred ca trebuie sa echilibrezi performanta si usurinta in mentenanta a template-ului cu izbucnirile iubitorilor inflacarati ai standardelor web care vor spune ca trebuie sa scrii markup semantic, iar un span gol, cu scop pur decorativ, este o incalcare flagranta a tot ceea ce este sfant si pur in HTML. </flame>

Stiai ca atunci cand deschizi un iFrame pe pagina dependintele acesteia (CSS, JS, imagini) intarzie declansarea evenimentului de onload() pe window si ca se calculeaza din liniile paralele de download de resurse (connection pool) ale paginii gazda? (2 simultane in IE6, 6 simultane in Firefox 3)

Eu nu stiam asta, dar am aflat dintr-un articol de pe blogul lui Steve Souders.

Articolul e un fragment dintr-un capitol al cartii Even Faster Web Sites care va fi publicata in cursul acestei veri. Daca esti preocupat de performanta site-urilor pe care le construiesti aceasta carte e o resursa foarte buna pentru tine. Intre timp poti consulta editia mai veche, dar foarte informativa, High Performance Web Sites.

Nu mai am Telefon!

De 6 luni ma chinui cu un telefon slab, inlocuitor pentru vechiul telefon Sony Ericsson W800i care a refuzat sa mai porneasca.

Nu am gasit un service GSM care sa imi inspire incredere dar am fost si un lenes macabru. Asa ca l-am purtat cu mine in rucsact toata perioada asta.

Am incercat sa ii inlocuiesc bateria, dar asta nu mi-a rezolvat problema. In schimb am observat ca atunci cand incerc sa il pornesc cu bateria noua imi afiseaza un ecran alb. Cateva luni mai tarziu lenea s-a disipat, am cautat pe net dupa simptomele astea si am gasit o droaie de dobitoci.

Exista servicii unde poti descrie problema si un bun samaritean priceput iti poate sugera o solutie. Exista si cretini care iti ofera solutia “buy a new phone”. Ceea ce aproape am facut. Din pacate telefoanele nu se mai fac “ca pe vremea mea” si a fost greu sa gasesc unul vrednic – si ala o caruta de bani.

White Screen of Death

Batranul Google si ratiunea m-au impins sa caut solutii chiar la productaor pe site. Si am gasit. White Screen of Death, aparent, este un indicator in device-urile mobile ca ceva in sistemul de operare s-a dus dracului. De regula asta se fixeaza reinstaland sistemul de operare pe telefon.

Sony Ericsson are un soft care te ajuta cu inlocuirea sistemului de operare. Merge doar pe PC deci Mac users sunt trendinezi si isi iau iPhone sau sunt descurcareti si pun o masina virtuala de Windows. Procesul e simplu: scoti bateria, o bagi la loc, pornesti aplicatia utilitara, si in timp ce conectezi telefonul la PC prin cablul USB tii apasata tasta C. Mai departe e un procedeu simplu de tip “next-next-i-agree”. Cateva minute mai tarziu ai lucratura dracului – telefonul – in stare perfecta de utilizare.

In procesul de update / reinstalare iti vei pierde toate datele stocate in memoria telefonului. Support-ul de la Sony Ericsson sugereaza un back-up al datelor. Pupa-le-as mufa USB, cum sa fac asta daca nu imi porneste telefonul?

Am pierdut toate datele din memoria telefonului dar am din nou dracia functionala. Arata ca naiba, e zgariat, murdar, joystick-ul face gat la apasarea in jos dar e superb pentru ca e al meu. Si dupa ani de zile suntem din nou impreuna :) Este prima mea achizitie scumpa din banii mei. Imi aduc aminte ca am lucrat foarte mult pentru el si l-am apreciat pentru ca ii stiu valoarea – nu te gandi financiar.

Am invatat ca:

• Sony Ericsson nu mai face telefoane cum le facea odata
• Forumurile neoficiale de support sunt tapetate cu idioti
• Nu trebuie sa mai fiu un lenes macabru!

Un aspect fundamental pe care nu l-am inteles mai devreme in cariera a fost acela ca un client se va razgandi in mod constant. Daca nu esti pregatit sa il abordezi cum trebuie tu vei fi cel care are de suferit intr-un fel sau altul – pierzi ore de somn si sanatate sau pierzi bani si reputatie.

Ceea ce urmeaza sa citesti iti poate fi util daca esti un web developer freelancer sau daca detii controlul asupra unei agentii de dimensiuni modeste care se ocupa de web development.

Metodologia SCRUM

O metodologie pe care o urmez unde lucrez acum se numeste SCRUM. Aspectele sale cele mai utile pentru mine sunt fragmentarea muncii in mai multe obiective, descompuse apoi in task-uri individuale. Obiectivele sunt apoi prioritizate dupa importanta in urma discutiilor cu managementul de proiect, in cazul tau ar fi clientul sau reprezentantul sau. Tu esti cel care decide cat timp si cat efort va lua fiecare obiectiv estimand task-urile individuale.

Lanseaza des

Aspectul reprezentativ al metodologiei este lansarea in iteratii, de regula o data la 30 de zile. In cazul unui proiect mai mic iti poti permite iteratii si mai rapide de 10 sau chiar 5 zile. In fiecare iteratie se indeplineste cel putin cate un obiectiv. Vei pleca la drum cu obiectivele fundamentale: baza de date in forma primara, modulele de baza – cele fara de care aplicatia nu are sens.

Lansand versiuni incrementale ale aplicatiei ii dai clientului sansa de a-si controla costurile si tie de a-ti doza efortul. Fiecarui obiectiv ii poate fi alocata o suma din costul total estimat al proiectului. In cazul in care clientul isi doreste modificari poti altera valoarea financiara a efortului pe care trebuie sa il depui pe fiecare obiectiv. In modul acesta tu si clientul veti observa ca proiectul inghite mai multi bani sau mai mult efort decat era prevazut si puteti conveni ce se intampla mai departe.

Lista de prioritati

Aici te ajuta lista de prioritati. Clientul poate alege sa renunte la unele mofturi din lista care au prioritatea mai scazuta dar care il vor costa, sau poate alege sa nu modifice obiectivele iteratiei deci vei depune efort care va fi remunerat suplimentar. De regula, orice client care intelege importanta functionalitatii de baza a aplicatiei sale va alege sa reunte la mofturi decat la calitatea produsului. Este datoria celui care intermediaza discutia cu clientul sa il indrume spre optiunea care va aduce mai multa valoare produsului decat bani usori in buzunarul dezvoltatorului. In final depinde de cum vrei sa iti construiesti cariera.

Avantajele modului de lucru cu SCRUM

• pleci la drum cu o estimare a costurilor, nu cu un pret fix.
• clientul are sansa sa vada produsul din si evolutia sa din timp.
• nu lucrezi degeaba perioade indelungate de timp fara sa ai feedback activ din partea clientului.
  E aplicatia lui, are tot dreptul sa o vrea modificata.
• ajustezi din mers modul in care aplicatia se comporta si ceea ce face.
• ai ocazia sa iti observi ritmul de lucru pe intervale de timp bine determinate.
  In viitor te va ajuta sa iti faci estimarile de timp si efort mult mai apropiate de realitate
• psihologic iti vine mult mai usor sa accepti schimbarea la un modul pe care nu ai apucat sa il construiesti.
  Accepti mult mai usor schimbarea unui modul pe care l-ai construit deja atunci cand si clientul intelege impactul acestei decizii asupra costului produsului final sau a setului de optiuni pe care acesta il va oferi.
• daca aplici modelul de plata peste secventa de iteratii si tu, la randul tau, ai o siguranta financiara.

Scurt despre SCRUM

SCRUM este o metologie care include mai multe practici. Eu ti-am expus doar cateva esentiale pe care le-as folosi daca ar trebui sa lucrez la o aplicatie web pentru un client. SCRUM acopera multe aspecte are muncii de echipa si se bazeaza pe auto-managementul fiecarui individ. Daca esti interesat de mai multe detalii cauta singur. Google e un bun inceput.

tr.im este un serviciu cu acelasi scop ca si tinyurl.com – ia un URL lung, il stocheaza in baza sa de date si iti ofera un URL mult mai scurt care redirectioneaza spre cel original. Tinyurl avea la baza ideea ca iti va fi mult mai usor sa tii minte un URL scurt. S-a dovedit ca cea mai buna utilizare a acestor servicii vine impreuna cu Twitter unde ai limita de 140 de caractere / mesaj.

De ce imi place tr.im:

• economie de caractere suplimentare (13 -http://tr.im/ vs 19 – http://tinyurl.com/)
• mai usor de tinut minte si de scris in browser (sunt un lenes)
• integrare cu twitter
• ceva statistici la URL-urile accesate
• o interfata web  mai placuta (moftul meu)

Stiu ca mai exista o sumedenie de alte servicii care fac acelasi lucru dar mie imi place tr.im.

Grooveshark e un music-on-demand radio online care ofera un serviciu numit tinysong.com prin care postezi pe contul tau de twitter un link spre piesa pe care o asculti.

Poti fura niste milisecunde dintr-o actiune cu mouse-ul daca te folosesti de evenimentul onMouseDown() din DOM.
Anticipezi logic actiunea de click odata ce butonul mouse-ului este apasat asa ca poti declansa un fir de executie in JS imediat ce ai inregistrat inceputul.

Acest truc iti permite sa “furi” cateva milisecunde pretioase din timpul unui download.

Un truc poate fi aplicat cu success este sa te folosesti de onMouseOver pe controalele dintr-o galerie foto intr-un sistem de livrare prin AJAX.

Mi se pare o actiune logica sa incepi preload-ul in background a pozei determinate de un thumbnail cand ai o constructie de navigatie similara cu cea de la Flickr. Din punct de vedere al interfetei ai putine motive sa faci hover peste acele imagini daca nu doresti sa navighezi prin galerie.

Desigur, e o jonglerie de performanta. Daca lansezi prea multe download-uri bazate pe actiuni incomplete ale userului poti deteriora experienta, dar cred ca daca iti gandesti bine planul de preload iti poti face galeria sa para mai rapida (as in responsive) pentru ca te folosesti de milisecundele dintre onMouseDown() si onClick()-ul complet pentru a incarca in browser o parte din continut.

Foloseste onMouseDown cu responsabilitate!
Uneori imi dau seama ca fac un click din greseala si imi mut cursorul de pe link, apoi dau drumu butonului. Asta impiedica actiunea de click.