Share
De două ori pe lună, revizuim sau actualizăm unele dintre postările și sesiunile preferate ale cititorilor noștri de-a lungul istoriei Nettuts +. Acest tutorial a fost publicat pentru prima dată în septembrie anul trecut.
Nu titlul spune totul? Există o mare varietate de instrumente și tehnici care pot îmbunătăți drastic viteza cu care codificăm. În special în timpul setărilor sensibile la timp, chiar și o economie de câteva secunde pe iterație se poate adăuga substanțial pe parcursul lunii. Îți arăt unsprezece dintre instrumentele mele preferate în acest articol.
Combinați puterea și specificitatea selectorilor CSS cu marcajul HTML și obțineți Codificarea Zen. Desigur, nu eram singura a cărei maxilar a scăzut prima oară când a văzut:
div # container> div # Cuprins> ul # nav> li * 4
? schimba in:
În acest an, proiectul Zen Coding a câștigat o atenție deosebită și a fost extins pentru a sprijini o mare varietate de editori de coduri, inclusiv Espresso, Vim, Netbeans, TextMate și Komodo Edit.
"Zen Coding este un plug-in editor pentru codarea și editarea de mare viteză a HTML, XML, XSL (sau a oricărui alt format de cod structurat). Miezul acestui plugin este un motor de abrevieri puternic care vă permite să extindeți expresii - similare selectorilor CSS - în cod HTML. "
Pentru mulți, o simplă experiență de codificare bazată pe file este mai mult decât adecvată; cu toate acestea, alții preferă o abordare mai integrată. Din păcate, capacitatea de a diviza ferestrele nu este disponibilă pe scară largă în rândul editorilor de coduri. Din fericire, însă, o mână dintre ei îl susțin la diferite niveluri de flexibilitate (regele fiind Vim).
Editorul excelent Vim oferă un nivel fără precedent de combinații de ferestre. Utilizare : sp și : VSP pentru a crea ferestre noi din interior normal mod.
În ultimii doi ani în special, ideea de codificare socială a câștigat o popularitate considerabilă - și de ce nu-i așa? Dacă este distractiv să partajați fotografii pe Flickr, același lucru va fi, desigur, adevărat și pentru codificare. Cu site-uri asemănătoare, Snipplr, Github sau Forrst, achiziționate recent de Envato, nu numai că vă puteți gestiona propriile fragmente pentru utilizare ulterioară, dar puteți profita și de creiere multiple, primind feedback comunitar cu privire la tehnicile și opțiunile de codare.
Envato a achiziționat recent popularul Snipplr.com
Un alt site de social networking? Da asta e adevărat; dar trebuie să recunosc: este distractiv. În plus, este educativ!
Rețelele online cum ar fi Github, Snipplr și Forrst sunt fantastice, totuși, acestea pot fi consumatoare de timp pentru a accesa, atunci când trebuie să reutilizați o anumită bucată de cod (presupunând că nu face parte deja dintr-un pachet). Soluția este de a instala una dintre diferitele aplicații de gestionare a codurilor disponibile în jurul rețelei web.
Personal, ca utilizator de Mac, prefer să nu este gratis Aplicație pentru fragmente.
Cu acest instrument, când lucrez la cod, pot să apăs, pur și simplu, pe Mac, Comandă + F12 pentru a introduce fragmentul de cod dorit în proiectul meu. Chiar mai bine, aceasta integrează o caracteristică "Exportați în Snipplr / Snipt / Pastie", care este extrem de utilă.
În timp ce mulți editori oferă un utilitar integrat de fragmente, aș recomanda să îmi asumați un instrument de terță parte. În acest fel, fragmentele dvs. nu se limitează la un singur editor.
Dacă doriți să vă sincronizați fragmentele pe toate computerele dvs., puteți crea o legătură simbolică prin Dropbox.
Accentsconagua
~ / Bibliotecă / Suport pentru aplicații / Fragmente. ln -s ~ / Dropbox / Fragmente ~ / Bibliotecă / Suport pentru aplicații / Fragmente . Tot ce vă puteți gândi! De regulă, dacă aveți tendința de a introduce mai multe blocuri de cod de mai multe ori, salvați-l. Să facem una evidentă împreună; când produceți un nou site web, cât de des scrieți cele trei linii pentru a crea colțuri rotunjite în browserele moderne?
#box -moz-border-radius: 3px; -webkit-border-radius: 3px; raza de graniță: 3 pixeli;
Acest lucru durează în jur de zece secunde pentru a tasta de fiecare dată. Ce risipă! În schimb, creați un fragment nou și reduceți timpul de codare cu 90%.
Sfântul Graal de codificare eficientă; alegerea editorului de cod va avea cel mai mare efect asupra vitezei de codare. Din păcate, nu există un răspuns definitiv. Decizia va depinde în mare măsură de:
De exemplu, cineva care creează preponderent temele HTML pentru un site ca ThemeForest nu ar fi înțelept să folosească un IDE complet ca Aptana. Este pur și simplu inutil și prea lent. Cu toate acestea, același lucru nu este valabil pentru un dezvoltator de partea serverului.
Când mi-am pus aceste întrebări, am stabilit că viteza și performanța au fost primordiale. Ca atare, în prezent folosesc Sublime 2 și Vim. Acesta din urmă este în primul rând descurajator la început, dar oferă un nivel fără precedent de flexibilitate și viteză, datorită faptului că și traversarea paginii dvs. necesită o limba, de felul. Cu toate acestea, pentru proiecte mai mari, care necesită depanare, folosesc Netbeans.
Bundle: învățați-i? utilizati-le. Editorii, precum TextMate - și, ulterior, E Text Editor - pachete popularizate; cu toate acestea, acestea sunt disponibile pe scară largă de la editor la editor.
De câte ori te-ai găsit tastând aceeași bucată generică de marcare sau cod, fie că ar putea fi o funcție nouă, fie structura unui nou plugin jQuery. Cât timp pierzi de fiecare dată când repetă acest proces? Acesta este locul unde jocurile intră în joc.
De exemplu, prin descărcarea pachetului TextMate CodeIgniter, putem profita de o gamă largă de metode și fragmente. Amintiți - mai puțin este tastarea mereu un lucru bun!
Cu acest pachet instalat, trebuie doar să tastați comanda rapidă desemnată și apoi apăsați fila (la majoritatea editorilor). Aceasta va extinde apoi comanda rapidă în codul solicitat. Ceea ce separă un pachet de un fragment este acela că puteți specifica opriri pentru mai multe file pentru a accelera în continuare viteza de codare.
Utilizatori Vim: dacă pierdeți / invidiați caracteristica pachet TextMate, verificați pluginul SnipMate.
Unelte precum LESS.js și Sass pot crește drastic viteza de codare. În ceea ce privește cine să alegeți: ambele sunt excelente. Aceste zile, am tendința de a prefera Sass, deoarece cadrul Compass este construit pe partea de sus a acestuia și oferă un număr de neegalat de funcții de confort. De asemenea, pare să fie ceea ce copii misto utilizare. :)
Aceste instrumente permit toate funcțiile pe care le aveți dori CSS a avut - cum ar fi variabilele și funcțiile.
/ * Variabile! * / @primary_color: verde; / * Mix-in-urile sunt funcții asemănătoare pentru operațiile utilizate în mod obișnuit, cum ar fi aplicarea frontierelor. Vom crea variabile prin prefixarea simbolului @. * / înconjurat (@radius: 5px) -moz-border-radius: @radius; -webkit-border-radius: @radius; raza de graniță: @radius; #container / * Referințe variabila am creat mai sus. * / background: @primary_color; / * Se apelează funcția de amestec in-built (funcție) pe care am creat-o și suprascrie valoarea implicită. * / .inclus (20px); / * Selectorii încorporați moștenesc selectorul părinților lor. Acest lucru permite codul mai scurt. * / a culoare: roșu;
Pro Tip: Pentru a vă actualiza browserul de fiecare dată când salvați un fișier (caracteristică foarte utilă), utilizați ceas metodă. Plasați următoarele în partea de jos a proiectului dvs. Desigur, presupuneți că ați configurat deja LESS.js.
less.env = "dezvoltare"; less.watch ();
Mulți ar putea susține că nu este sigur să utilizați o soluție bazată pe JavaScript. Dar este în regulă; există o mulțime de compilatoare disponibile pe web. Cea mai bună soluție am reușit să găsesc este numită LESS.app.
După ce îl descărcați (gratuit), glisați pur și simplu folderul proiectului în aplicație, care îl instruiește ceas toate fișierele .LESS. În acest moment, puteți continua să lucrați la proiectul dvs., ca de obicei. De fiecare dată când salvați, compilatorul va rula, ceea ce generează / actualizează un automat creat style.css fişier. Când ați terminat să vă dezvoltați aplicația, trebuie doar să schimbați referințele foilor de stil style.less la style.css, în consecinţă. Uşor! Acum nu există niciun motiv să nu profitați de LESS - dacă nu utilizați o soluție diferită, cum ar fi Sass.
Luați mini-seria noastră pentru a afla cum să lucrați cu Sass.
Cunoașteți antrenamentul: scrieți un pic de JavaScript, comutați și actualizați browserul, primiți o eroare, reveniți la editor? și clătiți și repetați. Deși noi o facem uneori, uneori, există alternative mult mai eficiente, cum ar fi protoyping devreme cu instrumente precum Firebug. Lucrând direct în browser, îl tăiați pe omul din mijloc, ca să spunem așa.
Dave Ward uber-talentat a recomandat acest sfat și chiar a creat un screencast care demonstrează această metodă.
Vizitați site-ul web Dave pentru a vedea o versiune de calitate superioară a acestui ecran.
Unelte cum ar fi Compass, sau chiar un pachet TextMate sunt extrem de utile - le folosesc de multe ori, de fapt. Dar, pentru multe proiecte, acestea nu sunt disponibile. Ca rezultat, am rămas în poziția de a copia și lipi peste și peste? și peste.
L-am construit pe Prefixr să facă toată lucrarea asta plictisitoare pentru mine. Pur și simplu lipiți în foaia de stil, apăsați Prefixize (sau apăsați Control + Enter) și Prefixr va filtra prin proprietățile CSS3 aplicabile și le va actualiza dinamic.
Nu-mi amintesc dacă Opera oferă o versiune prefixată a proprietății de tranziție (o-tranziție)? Nu vă îngrijorați; care este deja codificat în Prefixr!
Cu Prefixr, codificați doar foile de stil utilizând marcajele oficiale recomandate W3C. Când sunteți pregătit pentru implementare, rulați foaia de stil prin Prefixr și faceți-o cu ea!
Aflați mai multe despre Prefixr.
Vă avertizez mai întâi că foarte puțini editori de coduri oferă o caracteristică multi-select. Editorul pe care îl folosesc în prezent, Sublime 2, face totuși. Chiar mai bine, este disponibil atât pentru utilizatorii Windows cât și pentru utilizatorii Mac.
Deci, ce anume este selecția multiplă? Editori precum TextMate au oferit multă selecție verticală, ceea ce este destul de curat. Dar, cu selecție multiplă, puteți avea mai multe cursoare pe pagină. Acest lucru poate reduce drastic necesitatea utilizării expresiilor regulate și căutarea avansată și înlocuirea interogărilor.
Când am început prima oară în acest domeniu, am întotdeauna probleme cu comentarii cum ar fi "Nu reinventați roata". Nu este vorba despre reinventare; este vorba despre înțelegerea modului în care funcționează roata. Cu toate acestea, odată ce cunoașteți funcționarea interioară a roții, acest argument este cu siguranță adevărat: Dpe t REPEAT Yourself.
Codarea fiecărui proiect nou de la zero este incredibil de consumatoare de timp.
Dacă doriți să finalizați proiecte cât mai repede posibil (și cine nu), economisiți-vă ceva timp și profitați de diferitele niveluri abstractii care sunt disponibile pe web. O mână de favoriți include:
O să vă arăt a mea dacă mi-ai arăta a ta. Ce instrumente și resurse folosiți pentru a codifica mai repede?
