Share
Due volte al mese, rivisitiamo o aggiorniamo alcuni dei post e delle sessioni preferite dei nostri lettori da tutta la storia di Nettuts +. Questo tutorial è stato pubblicato per la prima volta lo scorso settembre.
Il titolo non dice tutto? Ci sono una vasta gamma di strumenti e tecniche che possono migliorare drasticamente la velocità con cui codifichiamo. In particolare durante le impostazioni sensibili al tempo, anche un risparmio di pochi secondi per ogni iterazione può aumentare considerevolmente nel corso del mese. Ti mostrerò undici dei miei strumenti preferiti in questo articolo.
Combina la potenza e la specificità dei selettori CSS con il markup HTML e ottieni la codifica Zen. Certo, non ero l'unico a lasciare la bocca aperta la prima volta che vedeva:
div # container> div # contenuto> ul # nav> li * 4
? convertire in:
In quest'ultimo anno, il progetto Zen Coding ha ottenuto notevole attenzione ed è stato ampliato per supportare un'ampia varietà di editor di codice, tra cui Espresso, Vim, Netbeans, TextMate e Komodo Edit.
"Zen Coding è un plug-in di editor per la codifica e la modifica ad alta velocità di HTML, XML, XSL (o qualsiasi altro formato di codice strutturato). Il nucleo di questo plugin è un potente motore di abbreviazione che consente di espandere le espressioni, simili ai selettori CSS- nel codice HTML. "
Per molti, una semplice esperienza di codifica basata su schede è più che adeguata; tuttavia, altri preferiscono un approccio più integrato. Sfortunatamente, la possibilità di dividere le finestre non è ampiamente disponibile tra gli editor di codice. Fortunatamente, alcuni di loro lo supportano a diversi livelli di flessibilità (il re è Vim).
L'eccellente editor Vim offre un livello senza precedenti di combinazioni di finestre. Uso : sp e : VSP per creare nuove finestre dall'interno normale modalità.
In particolare, negli ultimi due anni l'idea di codifica sociale ha acquisito una notevole popolarità - e perché no? Se è divertente condividere foto su Flickr, lo stesso sarà ovviamente vero per la codifica. Con il sito piace Snipplr, Github o Forrst recentemente acquistato da Envato, non solo puoi gestire i tuoi frammenti per l'uso futuro, ma puoi anche trarre vantaggio da più cervelli ricevendo feedback dalla comunità sulle tue tecniche e scelte di codifica.
Envato ha recentemente acquistato il popolare Snipplr.com
Un altro sito di social networking? Sì è vero; ma, devo ammettere: è divertente. Inoltre, è educativo!
Le reti online come Github, Snipplr e Forrst sono fantastiche, tuttavia, possono richiedere molto tempo per accedere, quando è necessario riutilizzare una parte di codice specifica (supponendo che non sia già parte di un pacchetto). La soluzione è installare una delle varie applicazioni di gestione del codice disponibili sul Web.
Personalmente, come utente Mac, preferisco il non gratis App di snippet.
Con questo strumento, quando lavoro sul codice, posso semplicemente premere, sul Mac, Comando + F12 inserire il mio snippet di codice desiderato nel mio progetto. Ancora meglio, integra una funzione "Esporta in Snipplr / Snipt / Pastie" che è estremamente utile.
Mentre molti editori offrono un'utilità di frammenti integrati, suggerirei invece di utilizzare uno strumento di terze parti. In questo modo, i tuoi frammenti non sono limitati a un singolo editor.
Se vuoi sincronizzare i tuoi frammenti su tutti i tuoi computer, tramite Dropbox, puoi creare un link simbolico.
Accentsconagua
~ / Library / Application Support / Snippet. ln -s ~ / Dropbox / Snippets ~ / Library / Application Support / Snippet . Tutto ciò che puoi pensare! Come regola generale, se si tende a digitare qualche blocco di codice più di una volta, salvarlo. Facciamo un ovvio insieme; quando si produce un nuovo sito Web, quanto spesso si digita le tre linee o così per creare angoli arrotondati nei browser moderni?
#box -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
Questo richiede circa dieci secondi per digitare ogni volta. Che spreco! Invece, crea un nuovo frammento e riduci il tempo di codifica del 90%.
Il Santo Graal della codifica efficiente; la tua scelta di editor di codice avrà il più grande effetto sulla tua velocità di codifica. Sfortunatamente, non c'è una risposta definitiva. La tua decisione dipenderà in gran parte da:
Ad esempio, qualcuno che crea prevalentemente temi HTML per un sito come ThemeForest non sarebbe saggio utilizzare un IDE completo come Aptana. È semplicemente inutile e troppo lento. Tuttavia, lo stesso non è vero per uno sviluppatore sul lato server.
Quando mi sono posto queste domande, ho determinato che la velocità e le prestazioni erano fondamentali. Come tale, attualmente utilizzo Sublime 2 e Vim. Quest'ultimo è inizialmente scoraggiante, ma offre un livello senza precedenti di flessibilità e velocità, poiché anche attraversare la tua pagina richiede un linguaggio, di sorta. Tuttavia, per i progetti più grandi, che richiedono il debug, utilizzo Netbeans.
Bundle: imparali? usali. Editor, come TextMate - e, successivamente E Text Editor - pacchetti divulgativi; tuttavia, sono ampiamente disponibili dall'editor all'editor.
Quante volte ti sei trovato a digitare lo stesso codice generico di markup o codice, se questa potrebbe essere una nuova funzione o la struttura di un nuovo plug-in jQuery. Quanto tempo sprechi ogni volta che ripeti questo processo? È qui che entrano in gioco i pacchi.
Ad esempio, scaricando il bundle CodeIgniter di TextMate, possiamo trarre vantaggio da una vasta gamma di metodi e snippet. Ricorda: meno digitazioni sempre una buona cosa!
Con questo pacchetto installato, è sufficiente digitare il collegamento designato, quindi premere linguetta (nella maggior parte degli editori). Questo espanderà quindi il collegamento nel codice richiesto. Ciò che separa un pacchetto da uno snippet è che puoi specificare più punti di tabulazione per accelerare ulteriormente la velocità di codifica.
Utenti Vim: se manchi / invidi la funzione di bundle di TextMate, controlla il plugin SnipMate.
Strumenti come LESS.js e Sass possono aumentare drasticamente la velocità di codifica. In termini di quale scegliere: sono entrambi eccellenti. In questi giorni, tendo a preferire Sass, dal momento che il framework Compass è costruito su di esso e fornisce un numero senza precedenti di funzioni di convenienza. Sembra anche essere quello bei ragazzi uso. :)
Questi strumenti consentono tutte le funzionalità che tu desiderio CSS aveva - come variabili e funzioni.
/ * Variabili! * / @primary_color: green; / * I mix-ins sono come funzioni per le operazioni di uso comune, come ad esempio applicare i bordi. Creiamo le variabili anteponendo il simbolo @. * / .rounded (@radius: 5px) -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; #container / * Indica la variabile che abbiamo creato sopra. * / background: @primary_color; / * Chiama il mix-in (funzione). Che abbiamo creato e sostituisce il valore predefinito. * / .rounded (20px); / * I selettori annidati ereditano anche il selettore dei genitori. Questo consente un codice più breve. * / a colore: rosso;
Suggerimento Pro: Per fare in modo che il tuo browser si aggiorni ogni volta che salvi un file (caratteristica molto utile), usa il pulsante orologio metodo. Inserisci quanto segue nella parte inferiore del tuo progetto. Ovviamente, questo presuppone che tu abbia già configurato LESS.js.
less.env = 'sviluppo'; less.watch ();
Molti potrebbero obiettare che non è sicuro usare una soluzione basata su JavaScript. Ma è ok; ci sono una manciata di compilatori disponibili in tutto il web. La migliore soluzione che sono riuscito a trovare si chiama LESS.app.
Dopo averlo scaricato (gratuitamente), trascina semplicemente la cartella del progetto nell'app, a cui viene richiesto di farlo orologio tutti i file .LESS. A questo punto, puoi continuare a lavorare sul tuo progetto, come al solito. Ogni volta che salvi, il compilatore verrà eseguito, il che genera / aggiorna automaticamente creato style.css file. Quando hai finito di sviluppare la tua app, devi solo cambiare i riferimenti al foglio di stile da style.less a style.css, di conseguenza. Facile! Ora non c'è motivo per non approfittare di MENO - a meno che tu non stia usando una soluzione diversa, come Sass.
Prendi la nostra mini serie per imparare esattamente come lavorare con Sass.
Conoscete il trapano: scrivere un po 'di JavaScript, cambiare e aggiornare il browser, ricevere un errore, tornare all'editor? e risciacqua e ripeti. Anche se lo facciamo tutti, a volte, ci sono alternative molto più efficienti, come il protoyping anticipato con strumenti come Firebug. Lavorando direttamente nel browser, si taglia fuori l'uomo medio, per così dire.
Il talentuoso Dave Ward ha raccomandato questo suggerimento e ha persino creato uno screencast che dimostra questo metodo.
Visita il sito Web di Dave per visualizzare una versione di qualità superiore di questo screencast.
Strumenti come Compass o persino un pacchetto TextMate sono estremamente utili: li uso spesso, in realtà. Ma, per molti progetti, non sono disponibili. Di conseguenza, siamo lasciati nella posizione di dover copiare e incollare oltre, e oltre? e oltre.
Ho costruito Prefixr per fare tutto questo lavoro noioso per me. Basta incollare il foglio di stile, premere Prefixize (o premere Control + Enter), e Prefixr filtrerà attraverso le proprietà CSS3 applicabili e aggiornarle dinamicamente.
Non ricordo se Opera fornisce una versione prefissata, ad esempio, della proprietà di transizione (o-transition)? Non preoccuparti per questo; questo è già codificato in Prefixr!
Con Prefixr, si codificano solo i fogli di stile usando il markup raccomandato dal W3C. Quando sei pronto per la distribuzione, esegui il foglio di stile tramite Prefixr e fallo con esso!
Ulteriori informazioni su Prefixr.
Per prima cosa ti avverto che pochissimi editor di codice offrono una funzione di selezione multipla. L'editor che attualmente utilizzo, Sublime 2, lo fa comunque. Ancora meglio, è disponibile per utenti Windows e Mac.
Quindi cos'è esattamente la multi-selezione? Bene, gli editori come TextMate hanno da tempo offerto una selezione verticale, che è abbastanza accurata. Ma con la selezione multipla, puoi avere più cursori sulla pagina. Ciò può ridurre drasticamente la necessità di utilizzare espressioni regolari e ricerca avanzata e sostituzione di query.
Quando ho iniziato per la prima volta in questo campo, ho sempre criticato commenti come "Non reinventare la ruota". Non si tratta di reinvenzione; si tratta di capire come funziona la ruota. Tuttavia, una volta che conosci il funzionamento interno della ruota, questo argomento è certamente vero: Don't REPEAT Ynoi stessi.
Codificare ogni nuovo progetto da zero richiede molto tempo.
Se vuoi completare nuovi progetti il più rapidamente possibile (e chi no), risparmia un po 'di tempo e approfitta dei vari livelli di astrazioni che sono disponibili in tutto il web. Una manciata di miei preferiti include:
Ti mostrerò il mio se mi fai vedere il tuo. Quali strumenti e risorse usi per codificare più velocemente?
