Share
Odată ce ați codat un timp, începeți să luați ceva de la sine înțeles. Uitați cât de inteligenți sunteți într-adevăr. Câte sute de comenzi rapide de la tastatură am memorat? Câte limbi am aflat? Câte cadre? Câte hacuri? Pentru a spune că designul / dezvoltarea web este o industrie extrem de dificilă, o puneți ușor. Apoi, adăugați faptul că o mare parte din ceea ce știți astăzi va fi considerată depășită în câțiva ani.
Astăzi, vom analiza o serie de sfaturi și trucuri care vor ajuta începătorii să își accelereze timpul de dezvoltare și să codeze mai eficient. Veți vedea o combinație de sfaturi de economisire a timpului rapid, precum și trucuri specifice de codificare pentru a spori eficiența aplicației web.
Când folosiți instrumentul "Salvați pentru Web" în Photoshop, putem comprima imaginile noastre pentru a reduce dimensiunile fiecărui fișier. Dar, ați știut că compresia poate fi luată chiar mai departe fără a sacrifica calitatea? Un site numit Smush.It face procesul un cinch.
Echipa de la Smush.It folosesc o varietate de instrumente.
* Elementele de listă de mai sus au fost preluate de pe pagina de întrebări SmushIt FAQ .
Deci, chiar înainte de a implementa un nou site web, rulați-vă url prin intermediul serviciului dvs. pentru a reduce toate imaginile dvs. - accelerând astfel site-ul dvs.. Feriți-vă - serviciul vă poate converti fișierele GIF în PNG. Este posibil să fie necesar să actualizați fișierele HTML și CSS în consecință. În timp ce suntem pe această temă, 99% din timp, salvând ca PNG este cea mai bună decizie. Cu excepția cazului în care utilizați un animat GIF animat, considerați că formatul PNG este cea mai bună practică.
Multe IDE oferă un panou de "fragment de cod" care vă va permite să salvați codul pentru o utilizare ulterioară. Te găsești prea des pe site-ul lipsă.com pentru a apuca textul generic? De ce nu salvați-o doar ca fragment? În Dreamweaver, apăsați "Shift F9" pentru a deschide fila snippet. Apoi puteți glisa fragmentul corespunzător în locația corespunzătoare. Aceste caracteristici îmi economisesc mult timp pe parcursul unei săptămâni.
Ați descărcat biblioteca jQuery și încercați încet să înțelegeți sintaxa. De-a lungul drumului, ai lovit o lovitură și ai dat seama că nu poți da seama care este valoarea lui $ someVariable. Ușor, doar ...
console.log ($ someVariable);
Acum, încărcați Firefox - asigurați-vă că ați instalat FireBug - și apăsați F12. Veți primi o valoare corectă.
Acum - multiplicați acest lucru prin infinit și duceți-l la adâncimile de totdeauna și totuși nu veți realiza cât de utile sunt Firebug și console.log (). :)
Creat de Chris Pederick, acest plugin incredibil de util pentru Firefox vă oferă o multitudine de opțiuni. Mulți dintre voi care urmăresc programele mele știu că sunt un fan al opțiunii "Editați CSS" pentru a-mi ajusta stilurile în timp real. Alte opțiuni utile includ ...
Bara de instrumente Web pentru dezvoltatori
Aceasta este o procedură pe care cu toții nu o realizăm suficient. Deși nu este întotdeauna posibil, puteți accelera de multe ori site-ul dvs. prin plasarea etichetelor de script lângă închidere
etichetă....
Cele mai multe browsere actuale pot descărca maximum două componente în paralel pentru fiecare nume de gazdă. Cu toate acestea, când descărcați un script, nu pot apărea alte descărcări. Descărcarea trebuie să se termine înainte de a merge mai departe.
Deci, atunci când este posibil, este perfect sens să mutați aceste fișiere în partea de jos a documentului pentru a permite celorlalte componente (imagini, css, etc) să se încarce mai întâi.
Dacă performanța este esențială pentru site-ul dvs., vă sugerăm să luați în considerare comprimarea fișierelor CSS și Javascript chiar înainte de implementare. Nu te deranja sa o faci la inceputul dezvoltarii tale. Va provoca mai multă frustrare decât ajutor. Cu toate acestea, odată ce arcul a fost legat, comprimați acei copii în sus.
Două alte instrumente utile pentru codul JavaScript de ambalare sunt YUI Compressor și JSMin.
În plus, aveți opțiunea de a comprima HTML - deși nu aș recomanda acest lucru. Reducerea fișierului este neglijabilă.
Nu cu mult timp în urmă, Jon Hobbs-Smith de la tvidesign.co.uk a postat un articol fantastic care detaliază 25 de sfaturi jQuery. Asigurați-vă că marcați această pagină! Iată câteva dintre preferatele mele.
Accentsconagua
dacă ($ ('# myDiv) .length) // acest cod se va executa numai dacă există div cu un id de #myDiv. Mulți oameni nu își dau seama că, atunci când accesează elemente dom, funcția jQuery acceptă un al doilea parametru - "context". Luați în considerare următoarele ...
var myElement = $ ('# someElement'); Acest cod va necesita jQuery pentru a traversa întreaga DOM. Putem îmbunătăți viteza utilizând un context ca al doilea parametru.
var myElement = $ ('# someElement', $ ('.container')); Acum îi spunem lui jQuery să caute numai în elementul .someContainer și să ignore totul în afara acestuia.
Când accesați ID-urile cu jQuery, biblioteca folosește metoda tradițională "getElementById". Cu toate acestea, atunci când accesați clasele, jQuery trebuie să utilizeze propriile metode pentru a traversa domul (nu există o metodă nativă "getElementByClass"). Ca urmare, durează un pic mai mult!
Examinați toate cele 25 de sfaturi!
Dacă aveți posibilitatea să alegeți între $ _GET sau $ _POST atunci când efectuați apeluri AJAX, alegeți primul.
"Echipa Yahoo! Mail a constatat că atunci când se utilizează XMLHttpRequest, POST este implementat în browsere ca proces în două etape: trimiterea mai întâi a antetelor, apoi trimiterea datelor. Deci, este mai bine să folosiți GET, care necesită doar un pachet TCP pentru a trimite dacă nu aveți multe cookie-uri). " - Developer.Yahoo.com
Rețineți - nu utilizați orbeste $ _GET. Asigurați-vă că știți exact ce faceți mai întâi. De exemplu, în nici un caz nu trebuie să amestecați chestionarul de interogare și accesul la baza de date. Nu cu mult timp în urmă, unul dintre prietenii mei din Twitter mi-a trimis o imagine a unui site web live care conține o interogare MYSQL în url. Nu faceți acest lucru! :)
Indiferent dacă folosiți PHP, ASP.NET, Mootools, jQuery - sau o combinație a acestora, luați în considerare utilizarea cadrelor atunci când este cazul.
De exemplu:
Cu toate acestea, dacă construiesc un site complicat care necesită un CMS complet și un acces complicat la date, voi examina unul dintre cadrele limbii preferate.
Amintiți-vă - creați cadre pentru dvs.; nu invers. Fii inteligent când faci aceste decizii.
YSlow este un serviciu minunat care verifică site-ul dvs. web pentru a vă asigura că este cât mai eficient posibil. Echipa Yahoo Dev, nu cu mult timp în urmă, a creat un set de linii directoare sau cele mai bune practici care ar trebui urmate atunci când se dezvoltă - multe dintre acestea sunt detaliate în acest articol, de fapt.
Există un ecran foarte bun YSlow care demonstrează multe tehnici de economisire a timpului. Vă recomand să vă vedeți când aveți șansa.
Cei mai experimentați designeri / dezvoltatori vor fi de acord cu mine; dacă trebuia să mă duc la meniul barei de instrumente de fiecare dată când vroiam să fac o schimbare în site-ul sau în proiectarea mea, m-aș fi pierdut. Am folosit comenzi rapide de la tastatură atâta timp cât nu mai știu locația corectă pentru aceste comenzi. Știu doar că "Shift X" deschide panoul corect.
La început, poate părea o cunoaștere pierdută. Dar vă asigur că nu este așa. Vă recomandăm să faceți o căutare Google pentru "comenzi rapide X" - unde X este egal cu software-ul dvs. (adică Photoshop). Imprimați graficul și plasați-l lângă computer. În următoarele săptămâni, practică atingeți mouse-ul cât mai puțin posibil. Acesta este un lucru care separă profesioniști de pasionații.
Hai sa recunoastem; nu orice site web trebuie să fie o aplicație imensă și complicată. Uneori, dorim pur și simplu să afișăm portofoliul nostru - probabil că majoritatea timpului pentru unii! În aceste cazuri, de ce nu creați un "șablon" simplu care să conțină tot ce aveți nevoie pentru a începe.
În dosarul meu de șablon, am inserat dosarele "JS" și "CSS".
În plus, am un fișier "index.html (php)" care conține câteva fragmente de cod pe care le folosesc pentru majoritatea proiectelor mele. Nu este nimic prea fantezist, dar economisește timp!
Document fara titlu
După cum puteți vedea, mă refer la fișierele mele CSS și Javascript, la fișierul jQuery al Google, la crearea funcției document.ready () jQuery și la deschiderea standardului "container" div.
Este destul de simplistă, dar economisește timp. Deci, de fiecare dată când creați un nou site web, pur și simplu copiați dosarul "șablon" și intrați.
În general, toate CSS și Javascript trebuie să fie eliminate din pagină și plasate în propriile fișiere externe respective.
Dacă aveți doar câteva stiluri de bază, puteți face o excepție. În acestea, și numai în acele instanțe, ar putea fi util să le includeți în pagina HTML.
AJAX este tot furia chiar acum - mai ales pentru că în final a devenit relativ ușor de utilizat, datorită bibliotecilor Javascript. În unele cazuri, trebuie să aveți o modalitate de a determina dacă scriptul a fost apelat cu Javascript. Există câteva zile pentru a îndeplini această sarcină.
O modalitate ar fi să adăugați o pereche cheie-valoare unică cu Javascript atunci când trimiteți POST. Apoi, puteți utiliza PHP pentru a determina dacă există cheia specială. Dacă se întâmplă, știm că Javascript este activat.
O modalitate mai bună ar fi să utilizați o funcție construită în PHP numită "HTTP_X_REQUESTED_WITH". Pentru a ilustra…
dacă esteset ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) // scrieți un cod și asigurați-vă că Javascript-ul este activat. altceva // Face ceva diferit pentru a compensa utilizatorii care au oprit JS.
Nu cu mult timp în urmă, Google a început să găzduiască scripturi populare, cum ar fi jQuery. Dacă utilizați o astfel de bibliotecă, este recomandat să vă conectați mai degrabă la CDN-ul Google decât să utilizați propriul script.
AJAX Biblioteci API
Sunt un mare fan al Chrome Google. Se deschide extrem de repede și procesează Javascript mai repede decât orice alt browser - cel puțin pentru moment (cred că cea mai recentă versiune de Firefox ar fi putut prinde.).
Cu toate acestea, nu veți vedea că voi părăsi Firefox în orice moment în curând. Numărul de plugin-uri utile disponibile pentru browser este uluitor. Iată o listă cu preferatele mele.
În același mod în care este bine să urăști Microsoft chiar acum, se pare că este popular în acest moment ca oamenii să atace pe cei care folosesc IDE atunci când se dezvoltă. Asta e doar prostie.
În multe cazuri, folosirea unui IDE avansat este esențială - în special atunci când lucrează în limbile OOP. Acum, dacă creați simplu un mic șablon HTML, programele precum Notepad ++ și Coda vor funcționa splendid. De fapt aș recomanda utilizarea lor în aceste cazuri. Nu adăugați bloatul suplimentar dacă nu aveți nevoie de el. Cu toate acestea, atunci când dezvoltați aplicații avansate, profitați de un IDE.
Ar trebui să o facă pentru moment. Sperăm că câteva dintre acestea (poate toate acestea!) Vă vor ajuta să vă faceți un designer și dezvoltator mai bun. Care sunt câteva dintre scurgerile dvs. preferate? Lăsați un comentariu de mai jos și spuneți-ne!
