Diventa uno sviluppatore front-end migliore e più veloce

Quindi sei già un grande sviluppatore web.

Hai alcuni killer tagli al CSS (anche con il browser cross), forse sei un esperto di Photoshop da anni e hai abbastanza conoscenze di jQuery per far sì che quasi tutte le animazioni concatenate vadano a buon fine.

Ma certamente te lo chiedi, Qual'è il prossimo?

In effetti, una delle domande più frequenti sullo sviluppo web è "come posso rimanere all'avanguardia?" Chris Coyier ha recentemente presentato un fantastico discorso sull'argomento, e ci sono siti completamente dedicati a tenersi aggiornati sulle ultime notizie sul design del web. Il riepilogo di Addy Osmani su come diventare un ingegnere di front-end migliore mette a disposizione degli ottimi contenuti per te da prendere in considerazione sull'argomento; inutile dire che un sacco di persone intelligenti stanno pensando a questo argomento, quindi siete diretti nella giusta direzione.

Sfondo di Space Ghost, di Mads Frantzen

In questo articolo, parleremo di un modo molto importante per distinguersi e diventare uno sviluppatore migliore: diventare un efficace sviluppatore di interazione rapida.


Che cos'è "Rapid Interaction Development?"

Lo sviluppo rapido dell'interazione è un termine che utilizziamo oggi per descrivere la pratica di creare rapidamente qualcosa per il web con cui un utente può interagire, in particolare con l'intento di accelerare e perfezionare rapidamente l'interazione. Questa non è la stessa cosa della progettazione di documenti piatti; invece, questo include la costruzione di qualcosa che ne ha uno o più trame di interazione.

Ciò può includere, ad esempio, un widget che l'utente può digitare e cercare, o un menu a discesa che consente a un utente di selezionare una voce di sottomenu. Questi pezzi interattivi sono gli elementi costitutivi di una trama più ampia dell'esperienza utente completa di utilizzare un sito Web, e quindi sono incredibilmente importanti per essere in grado di scorrere e "sentire". Quando si progetta un sito Web, queste interazioni possono creare o distruggere l'esperienza dell'utente e quindi possono creare o distruggere l'efficacia del sito nel suo complesso.

Le interazioni non hanno sempre pezzi "in movimento"; infatti, lo sviluppo rapido delle interazioni si basa spesso su gerarchie di contenuti e collegamenti ipertestuali come qualsiasi altra cosa. Lo sviluppo dell'interazione tiene conto dell'interazione completa dell'essere umano con il computer, incorporando intuizioni sulla base di utenti, comprensione di base dei fattori umani e conoscenza del messaggio e dell'immagine dell'organizzazione o dell'individuo rappresentato dall'interazione.


Comprensione del valore dello sviluppo rapido dell'interazione

Se assumo uno sviluppatore web front-end (o chiunque altro per questo), penserò a cinque cose principali.

  1. La loro personalità si adatta alla mia squadra?
  2. Hanno talento?
  3. Sono efficienti?
  4. Sono coerenti?
  5. Posso pagarli correttamente?

Queste domande sono estremamente importanti per qualsiasi parte del processo di assunzione. La prima domanda è di solito decisa in base alla chimica di interazione, non qualcosa che copriremo in questo articolo. Il quinto di solito è deciso caso per caso, ed è anche qualcosa che non rientra negli scopi di questo articolo. Tuttavia, nel rispondere alle altre tre domande, due fattori primari giocano nel giudizio: velocità e accuratezza. Nel caso dello sviluppatore web, lo sviluppo dell'interazione rapida è un modo per dimostrare che hai preso molto sul serio il mestiere dello sviluppo dell'interazione.

Il rapido sviluppo dell'interazione non viene accidentalmente abbattuto quando una musa colpisce (come può essere il caso con un grado più artistico). Invece, lo sviluppo rapido dell'interazione è un'abilità che viene affinata dallo sviluppatore. Questa abilità dimostra efficienza e talento e dà più fiducia nella capacità degli sviluppatori di raggiungere la coerenza. Per essere in grado di sviluppare rapidamente interazioni, lo sviluppatore deve avere i due ingredienti magici: velocità e precisione.

Un disclaimer: Può darsi che qualcuno venga assunto perché, sebbene non abbiano talento come un altro individuo, sono estremamente coerenti e hanno una grande personalità. Questo non è affatto una guida "come ottenere un lavoro come sviluppatore".


Andiamo avanti con esso, dobbiamo noi?

Con la comprensione dell'importanza dello sviluppo rapido dell'interazione, ora possiamo capire come è possibile subito inizia a affinare questa abilità. Alcuni di questi suggerimenti prendono un semplice cambiamento di mentalità, mentre altri prendono un investimento di apprendimento o cambiamento di modello. Tutti questi, tuttavia, possono aiutarti a diventare uno sviluppatore web migliore, più veloce e più prezioso.


Ottimizza i tuoi modelli

Hai adottato un framework CSS? Se è così, allora capisci il valore del codice riutilizzabile. Molto probabilmente hai adottato degli schemi senza rendertene conto. Per dimostrarlo, chiediti: "quando inizio a costruire un sito web, qual è il mio primo passo?" Se la tua risposta è "Non so", allora è il momento di capirlo. Se la tua risposta è "prima apro il mio editor di testo", allora hai adottato almeno un passaggio in uno schema.

Quindi, come ottimizzi un pattern? Questi sono spesso chiamati flussi di lavoro, ma non è una descrizione adeguata, in quanto il flusso di lavoro non include tutto ciò di cui vogliamo parlare qui. Alcuni strumenti comuni per aiutarti a strutturare il tuo pattern sono i "framework" CSS e JS come Twitter Bootstrap, Foundation o Topcoat ...


... strumenti di pre-elaborazione come SASS o LESS ...


... forse strumenti completi di ottimizzazione e processori come CodeKit ...


... avvio di temi Wordpress come Bones e persino l'opzione di creare script personalizzati alimentati da una riga di comando. Se sei uno sviluppatore JavaScript più avanzato e stai cercando di spostarti in un nuovo spazio, dovresti considerare Backbone, Ember e altri (framework JavaScript orientati MVC) [http://todomvc.com/]; si consiglia inoltre di esaminare il nodo, che abilita JavaScript sul lato server. Potrebbe volerci del tempo, ma raccogliere e imparare alcuni di questi strumenti certamente aumenta la produttività a lungo termine.

Raccomandazione: decidere un qualche tipo di HTML boilerplate / riutilizzabile "index.html" e la struttura del file associato che segue le convenzioni comunemente accettate, è costruito con markup semantico e fornisce una "lavagna vuota" su cui lavorare (si pensi: HTML5 Boilerplate). Forse se lavori principalmente con Wordpress o con un altro strumento, dovresti trovare uno standard simile con funzionalità di livello base per quello strumento.

Se sei un po 'più avanzato, acquisisci alcune abilità di Yeoman per l'impalcatura rapida dei progetti e la generazione di piastre di prova basate su procedure guidate. Decidi su un framework CSS e / o JS (Bootstrap, Foundation, Topcoat) e inizia a utilizzare un preprocessore per CSS prima piuttosto che dopo. L'apprendimento di un preprocessore vale la pena investire nel tempo e non ridurrà la produttività poiché LESS e SASS possono gestire sia il CSS vanilla. Prova a creare un wireframe completo di un layout di base completamente con le classi built-in di un framework. Sarai probabilmente sorpreso di quanto poco codice hai bisogno di scrivere per far sì che un layout funzionale avvenga molto rapidamente. Questo riduce il sovraccarico di scrittura di codice ripetitivo e ha anche il vantaggio di trarre da prove molto più estese e considerazioni cross-browser di quanto una persona possa fare da sola.


Lavora con quello che sai; Impara intenzionalmente ciò che non fai.

È assolutamente importante adottare un stile di vita dell'apprendimento come sviluppatore L'adozione di nuovi strumenti e competenze come quelle sopra descritte è una parte della linfa vitale di qualsiasi sviluppatore di successo. La tecnologia che stiamo usando ogni giorno sta cambiando più velocemente di qualsiasi altra cosa; per rimanere al di sopra o al di sopra del nostro attuale posto nel settore, è imperativo che impariamo continuamente.

Ma - è altrettanto importante capirlo imparare nuove tecnologie ti rallenterà - All'inizio. Per questo motivo, quando stai praticando l'interazione rapida dell'interazione, non dovresti anche imparare un nuovo quadro. Prendi invece intenzionalmente un po 'di tempo dalla tua settimana e dedicalo all'apprendimento di quel quadro attraverso un progetto per animali domestici, una notte di hacking del fine settimana o implementando i pezzi del nuovo strumento in un progetto che esigenze le nuove funzionalità fornite da quella soluzione. Ciò ti consentirà di mantenere il tuo slancio e risolvere i problemi in modo fluido piuttosto che in una frenesia di Google e StackOverflow. Ancora più importante, questa segregazione intenzionale consente di concentrarsi su ciò che conta: risolvere i problemi di progettazione anziché i bug del codice.

Come nota secondaria, quando stai imparando intenzionalmente, aiuta anche a risolvere problemi che hanno già soluzioni ben note e ben documentate; certo, il mondo non ha bisogno un altro semplice da fare. Ma creare un'applicazione to-do può aiutarti a capire molto di più JavaScript e potrebbe aiutarti in futuro quando sintetizzi le informazioni per risolvere nuovi problemi. La creazione di soluzioni per problemi che già dispongono di soluzioni ben documentate consente di confrontare e confrontare la soluzione e facilita la ricerca di aiuto quando si rimane bloccati. Se ti trovi in ​​un territorio inesplorato e stai cercando di imparare allo stesso tempo, perderti è molto più probabile e comprometterà l'obiettivo del processo di apprendimento.


Adotta Mini-Sprint Hyperfocused

Se hai sentito il termine "agile", potresti avere un'idea di cosa sia uno sprint. Gli sprint sono brevi periodi di lavoro predefiniti in cui gli sviluppatori decidono su una serie di obiettivi e "sprint" per completare tali obiettivi entro il tempo assegnato. Poiché stiamo parlando di un rapido sviluppo dell'interazione, uno sprint è adatto a questa discussione. Ecco le basi.

  1. Definire
    Assegna priorità a compiti / obiettivi, definisce la lunghezza dello sprint, rimuovi o aggiungi attività fino a quando il tempo stimato per completare le attività corrisponde alla lunghezza predefinita dello sprint
  2. Sprint
    Questo è il momento in cui sei "nella zona" - zero distrazioni, ecc.
  3. Riflettere
    Una volta completato lo sprint, controlla i tuoi progressi. Hai incontrato o superato i tuoi obiettivi? Ciò che ha causato il maggior hangup?
  4. Adattare
    Scopri da cosa hai riflettuto e sistema i sistemi per evitare gli hangup.

Nel tradizionale approccio agile, gli sprint si basano sull'aiuto alla collaborazione del team e generalmente durano più giorni o addirittura settimane. Qui, stiamo parlando di autogestione e mini-sprint iperfocalizzati. Questi mini-sprint potrebbero anche concentrarsi semplicemente su una singola attività o interazione e sui relativi obiettivi. Il processo di definizione e assegnazione di priorità all'attività o alle sue attività secondarie prima di immergersi nel lavoro e successivamente di dedicare tempo per riflettere sul processo e adattare il tuo flusso di lavoro o modelli (ricorda, è importante ottimizzare i tuoi modelli) ti aiuterà a diventare più obiettivamente consapevole di la vostra velocità e produttività e vi consentiranno di essere più consapevoli di ciò che potrebbe utilizzare il miglioramento a livello micro.

Raccomandazione: definisce due scatti da 3 ore per un giorno, ciascuno con un'attività primaria. Lo scopo dello sprint (come con uno sprint fisico) è quello di guidare il cervello più forte che puoi per quelle 3 ore. Dopo quelle 3 ore, avrai bisogno di una pausa cerebrale; forse questa è la tua pausa pranzo, o forse hai scelto di adottare un programma alternativo per consentire un ininterrotto blocco di tempo iper-focalizzato (ne parleremo più avanti). In ogni caso, la pianificazione di questi sprint l'uno dall'altro ti aiuterà a ricaricare il tuo cervello. Vale la pena provare tipi di attività completamente opposte (come fare una passeggiata o leggere fiction) o anche un pisolino - di più su questo qui. Se lavori per un'agenzia, forse la pausa è il tempo da dedicare alle riunioni, alle attività amministrative o meno alle attività di sviluppo. Alcune persone considerano questo il modo migliore di lavorare ogni giorno, e alcuni possono scegliere di fare questo tipo di "sprint interval training" sporadicamente; scegli quello che ti rende più produttivo e aumenta la velocità di sviluppo dell'interazione.


Blocca temporaneamente i siti web di go-to

Se sei come la maggior parte delle persone, le tue dita hanno memoria muscolare; quando apri un browser, è istinto a digitare immediatamente Hacker News, Tuts + o Twitter? Quali sono i siti che ti fanno procrastinare?


Hacker News ha attaccato questo problema in un modo specifico, offrendo agli utenti registrati la possibilità di impostare una restrizione "noprocrastinata". Ci sono alcuni strumenti interessanti che offrono anche questo tipo di restrizioni, ma perché non farlo da soli? Su un Mac, esegui i seguenti comandi dal terminale:

sudo nano / etc / hosts # inserisci la tua password quando viene richiesta. # Questo aprirà un file in un editor di codice basato sul terminale; # Non preoccuparti! Non farai molto qui dentro. Digita le seguenti linee. 0.0.0.0 twitter.com 0.0.0.0 facebook.com # premere Ctrl + C (uscita), Y (sì, mi piacerebbe salvare), e inserire (salvare come nome file esistente)

Puoi modificare lo stesso file su Windows (vedi questa spiegazione).

Questo ti impedirà di usare Twitter o Facebook, e invece ti reindirizzerà al tuo localhost (0.0.0.0 è una scorciatoia per il tuo computer). Per tornare a social-network-land, basta seguire la stessa procedura, ma rimuovere le righe che hai aggiunto.

Raccomandazione: Dovresti bloccare Facebook e Twitter tutto il tempo mentre lavori? Noi diciamo no. Ha senso essere in grado di fare piccole pause tra le attività per evitare di bruciare. Tuttavia, durante uno sprint, se questi siti sembrano farti perdere tempo, è importante (almeno finché non rompi l'abitudine della memoria muscolare) per metterli in pausa. La nota importante qui è, controlla la tua procrastinazione, anche se questo significa pianificare il tempo sprecare. Essere consapevoli del tempo che stai dedicando ad una data attività ti aiuterà a essere più consapevole se quel tempo stia scivolando via dal tuo controllo.


Riduci al minimo l'interruzione

Da tempo è noto che le interruzioni riducono la produttività dei lavoratori della conoscenza. (Vedi qui, qui, qui, qui - e c'è molto di più disponibile attraverso una rapida ricerca su Google.) I programmatori (e, quindi, i web designer) sono suscettibili di ottenere solo potenzialmente uno sessione di 2 ore ininterrotta in un giorno. In metodologia agile, c'è il concetto di ore centrali che ritiene che un forte focus dovrebbe essere mantenuto per 5 ore totali al giorno. Questo è un salto in avanti dalle due ore che i programmatori possono aspettarsi di ottenere in un normale ufficio.

L'anatomia di un'interruzione

Esistono molti tipi di interruzioni, ma esamineremo due aspetti specifici dell'interruzione oggi. Le prime sono interruzioni accolte o "autoinflitte", le seconde sono interruzioni esterne o "intrusive". Entrambi i tipi sono dannosi per la produttività, ed entrambi i tipi possono essere in qualche modo gestiti in diversi modi.

Interruzioni auto-inflitte si verificano perché in qualche modo hai creato spazio per il loro verificarsi. Questi di solito si presentano sotto forma di notifiche programmabili (telefono, computer, ecc.).


Interruzioni intrusive si verificano perché altri umani hanno bisogno che tu presti attenzione a loro. La disconnessione è il sincronizzazione e senso di urgenza. Devi gestire il tuo tempo e devi mettere in atto dei metodi per eludere il più possibile gli effetti negativi dell'interruzione.

Quindi cosa fai per alleviare le interruzioni? Come raggiungi Zen Zone Time? Ecco alcuni dei nostri consigli.

  1. Riduci o disabilita completamente le notifiche
    Questo include notifiche telefoniche come testi, e-mail, Twitter e persino "chat". Nascondi le tue finestre di chat e partecipa a queste come parte del tuo flusso di lavoro, anziché su una base di "domanda" di risposta. Questo potrebbe sembrare che danneggerà la tua produttività all'inizio, ma potresti essere sorpreso di quanto le persone siano disposte ad aspettare se lo sono davvero importante, e quanto sono propensi a risolvere i problemi da soli se sei troppo impegnato per uscire da quello che stai facendo.
  2. Chiedi alla tua direzione di leggere questo: adottare un rispetto organizzativo per The Zone.
    Creare regole nell'organizzazione riguardo a "zone time" o "maker time". Questo significa che ci sono dei limiti specifici per quando, dove e come puoi interrompere qualcuno quando si trova nella zona. Hanno dei modi specifici per significare che sei "sotto", come mettere le tue cuffie o lavorare in una parte specifica del tuo ufficio. Questo è lo scopo dei messaggi "away" sulla chat, pure. La direzione deve dedicare del tempo alla coltivazione dello sviluppo rapido dell'interazione!
    Manager - questo può sembrare una potenziale minaccia per l'ufficio, ma come qualsiasi cosa, puoi provare questo per un po 'per vedere quali pezzi falliscono e quali pezzi riescono. Probabilmente vedrai aumenti di produttività immediatamente.
  3. Isoli te stesso
    Forse la soluzione più efficace, isolarsi ti rende il controllore del tuo spazio. Questo può accadere in molti formati diversi; per esempio, molti web designer e sviluppatori lavorano nei coffee shop per immergersi nell'isolamento. Ciò impedirà le interruzioni che si verificano a causa della vicinanza fisica. L'isolamento non significa sempre la posizione, tuttavia; se la maggior parte degli uffici funziona dai 9 ai 5, forse lavori dalle 6:00 alle 14:00 o dalle 12:00 alle 20:00. Questo ti darà lo spazio e il tempo per pensare e lavorare senza interruzioni. Forse puoi lavorare da remoto uno o due giorni alla settimana? Forse è molto più semplice di quello per te, in particolare se sei un libero professionista.
  4. Sii diligente con la comunicazione programmata
    Se stai per mettere delle barriere intorno a te, devi anche essere disposto ad attenersi alla tua parola e rispondere ai messaggi quando esci da sotto la Zona. Non lasciare che questo scivoli, altrimenti gli aspetti produttivi del tuo fuso orario saranno ridotti dagli aspetti negativi delle tue abitudini di comunicazione. Oh, e non dimenticare di chiamare tua madre!

Game On: Competition and Reward

Cosa rende gli eventi "hackathon" così produttivi? In che modo le persone realizzano prodotti fattibili in 48 ore? Forse è una miscela di caratteristiche.
1. Tempo previsto, protetto, pianificato per uno sviluppo rapido mirato
2. La concorrenza con gli altri
3. Premi in denaro
Gli hacker si separano dal "flusso normale" del lavoro quotidiano. Certamente, non vorremmo lavorare per 48 ore di seguito tutto il tempo. Ma la mentalità produttiva che ne deriva è estremamente importante. Abbiamo già accennato a quanto sia importante la concentrazione e il tempo ininterrotto. Tuttavia, è uno sforzo degno di considerazione considerare come la creazione di alcuni concorrenti e sistemi di ricompensa personali possa contribuire ad aumentare la tua efficienza nello sviluppo. Questo aiuta a stabilire parametri di riferimento e naturalmente allena il cervello ad adattarsi ai comportamenti che sono gratificanti.

Raccomandazione: se lavori con un altro sviluppatore, scegli una competizione con obiettivi chiari e orientati al tempo. Non importa davvero quali siano questi obiettivi. Prenditi del tempo per elaborarli. Forse puoi competere contro te stesso; pratica usando gli sprint come competizione e fissi i tuoi obiettivi aumentare la tua efficienza da un po 'di tempo. Imposta ricompense sia per quando sei in una modalità competitiva, sia per quando completi uno sprint di lavoro concentrato. Questo ti aiuterà a rimanere concentrato durante lo sprint stesso. Una ricompensa può essere una cosa fisica (come una tazza di caffè) o qualcosa di meno concreto (come un parcheggio VIP per una settimana o "tempo libero").


Tuffati nella comunità Open Source

Manterremo questo consiglio breve, perché i benefici qui saranno evidenti. L'Open Source World è pieno di persone straordinarie e di talento che costruiscono cose che aiutano gli altri a fare meglio il proprio lavoro ogni giorno. Esempi come le strutture di cui abbiamo appena parlato graffiano appena la superficie. Ecco alcuni dei vantaggi di lavorare e comunicare con la comunità open source.

  1. Esposizione a nuovi strumenti
  2. Soluzioni gratuite a problemi comuni
  3. Nuove soluzioni ai problemi emergenti
  4. Esiste una migliore comprensione dei problemi che potresti non sapere
  5. Opportunità di contribuire e diventare parte del ciclo di dare / ricevere
  6. Osmosi pensata: apprendimento per ripetizione ed esposizione

Immergersi nella comunità open source e imparare a utilizzare gli strumenti offerti può immediatamente aumentare la produttività, ma rende anche molto più probabile che un'altra persona possa riprendere il progetto e continuare a sviluppare su quel progetto. L'open source consente alle persone di collaborare a una documentazione standard e preesistente. Ciò riduce il sovraccarico cognitivo per il trasferimento di progetti e ti rende uno sviluppatore molto più esperto; questo si traduce immediatamente in maggiore efficienza.

Raccomandazione: Ottieni un account GitHub e inizia a costruire cose con gli strumenti disponibili su GitHub.


Questo è un po 'una reiterazione di ciò che abbiamo detto prima: utilizzare i framework open source per risolvere i problemi in modi prevedibili e modellati e partecipare alla comunità di altre persone che lo stanno facendo. La collaborazione e la discussione sono chiavi molto importanti per l'apprendimento.


Conclusione

Questo non è affatto un elenco completo di cose che puoi fare per diventare uno sviluppatore di interazioni rapide. Lascia alcune note nei commenti delle cose che hai provato che hanno funzionato, fallito o che hanno avuto poco o nessun effetto!