Dacă tot sunt întrebat aproape zilnic cum am învăţat javascript (şi tot spun că eu NU ştiu js; ştiu jQuery - şi nici ăsta la un nivel foarte avansat) am zis că ar fi bine să pun la bătaie câteva tutoriale video care se întâmplă să le am în bookmarks, dar nu am apucat să le văd decât pe sărite deoarece timpul nu este tocmai cel mai bun prieten al meu.

Introducere în Javascript

Theory of DOM

Advanced Java script

Joe Hewitt: welcome to Firebug

În afară de ultimul link, sunt câte trei link-uri pe rând, aşa că ai grijă pe ce dai click

Enjoy!

Azi am început să tai un layout ce avea o parte dintr-un formular un pic… diferit de cum ar fi normal. Şi anume un alt buton de upload. Şi m-am gândit eu puţin şi am ajuns la concluzia că elementele ce intră într-un tag form sunt cel mai greu de customizat:

1. <legend> se comportă diferit pe firefox comparativ cu IE sau Opera, neputând fi poziţionat în niciun fel - padding/margin. Singura soluţie ar fi poziţionare relativă a fieldset-ului şi poziţionare absolută a tag-ului legend. Sau folosirea unui titlu în locul lui <legend> (<h4> sau <h5>)
2. <input type=”checkbox” /> şi <input type=”radio” /> nu poţi sa le convingi prea uşor de un anume background/culoare. Cred că ţine şi de setările sistemului de operare
3. <input type=”text” /> şi <textarea> au un „mic” bug în IE: dacă are o imagine ca background iar textul depăşeşte lătimea definită, background-ul pleacă la pădure. Fix? Pentru IE6 se defineşte bg ca fixed. Pentru IE7 nu am găsit altă soluţie decât să pun input-ul sau textarea într-un alt element (span/div) şi schimb background la acest element.
4. <select> & <option> padding-ul se aplică după ureche, în funcţie de browser. În plus, în IE6 este un bug criminal: niciun element nu poate apărea deasupra unui <select>. Soluţia? Dacă foloseşti jQuery, găseşti o mulţime.
5. Am lăsat cireaşa de pe tort (bomboana de pe colivă?!) la urmă: <input type=”file” />. Un simplu style=”border:1px solid #000″ îi strică rău de tot aspectul. Soluţii sunt multiple:

• nu te legi sub nicio formă de file şi te mulţumeşti doar cu lăţime;
• foloseşti o şmecherie făcută în flash (ai nevoie şi de cunoştinţe server side);
• foloseşti o şmecherie făcută în javascript. Sau un plugin pentru jQuery (download AICI deoarece nu prea merge site-ul).

Pentru primele patru probleme există o rezolvare foarte simplă all in one. Este o versiune recentă ce rezolvă o parte din problemele iniţiale (select-ul nu funcţiona decât dacă se făcea click pe săgeată, nu se putea folosi tastatura).

Enjoy!

Într-o lume perfectă, codul (css/xhtml) valid este interpretat identic de toate browserele. Dar, cum nu suntem într-o lume perfectă, există bug-uri, atribute proprietare unui browser sau altuia şi interpretări greşite. Dar, partea bună este că există şi fix-uri pentru acestea. Cu siguranţă, cel mai înjurat browser de toţi web-developerii este IE, în special versiunile pre 7. Cei ce lucrează de mult timp în domeniu, au avut de-a face şi cu capriciile mai multor versiuni ale IE, spre deosebire de cei recenţi (1-2 ani) ce se „luptă” doar cu IE 6 şi, mai nou, IE 7.

De-a lungul timpului, mi-am format un obicei din ce am citit pe diverse forumuri ce mă ajută foarte mult în dezvoltare şi îmi conferă o oarecare siguranţă: fac site-ul pentru Firefox, îl testez în Opera şi Safari şi fac debugging pe IE. Din fericire, până acum nu am avut mari probleme cu Opera şi/sau Safari (de fapt nu am avut deloc ), singurele dureri de cap fiind date de IE, despre care voi scrie puţin. (Mai mult…)

SEO Book are un ghid destul de interesant despre cum să-ţi optimizezi blogul pentru motoarele de căutare. Enjoy!

CLICK

Yahoo a lansat cu ceva timp în urmă un utilitar ce îţi poate compresa codul JS sau CSS destul de mult - YUI Compressor. De fapt, acest utilitar şterge comentariile şi pune tot codul pe o singură linie. Nu ţi se pare mult, nu? În cazul unui fişier cu sute-mii de linii, chiar se cunoaşte ceva

Cu toate că Julien Lecomte a scris mai multe despre acest subiect, eu vreau să îţi arăt o cale de a face compresia o chestie banală, ce te scuteşte de command promt, totul reducându-se la două click-uri (pe numărate, da? )

Pasul 1 - Environment Variables

Pentru a seta Environment Variables, apasă tasta (Mai mult…)