Una storia di due siti web

L'importanza del lento progresso e dell'autoriflessione

Foto di Tanya Nevidoma su Unsplash

"Ehi, dato che stai imparando a programmare, pensi che potresti farmi un sito web?"

Sono sicuro che tutti abbiamo già sentito questa domanda. Viene fornito con il territorio di essere uno sviluppatore web. La prima volta che l'ho mai sentito è stato nel marzo del 2016. Mia moglie era una graphic designer che cercava di entrare nel campo dell'interfaccia utente / UX. Voleva mostrare le sue abilità in un portfolio online.

A quel punto avevo imparato lo sviluppo web solo per 3 mesi (avevo iniziato come risoluzione per il nuovo anno). Avevo finito un paio di corsi HTML, CSS e JavaScript ed ero ansioso di scavare i denti in un progetto succoso.

“Sì, posso farlo per te. Non dovrebbe richiedere troppo tempo. "

Ci sono voluti quattro mesi.

Mi sono reso conto abbastanza rapidamente di essermi morso troppo. Tuttavia, mentre ero ingenuo, ero anche determinato. Ho messo tutto quello che avevo in quel sito web. Quando non lavoravo nel mio lavoro, stavo programmando o cercando Stack Overflow.

Soprattutto cercando Stack Overflow, molto.

Nonostante lo stress e la tensione che questo progetto mi ha causato, non avrei potuto sentirmi più orgoglioso quando l'ho visto dal vivo per la prima volta sul mio browser.

Quello era il mio lavoro. L'avevo fatto.

Usando il suo nuovo sito Web, mia moglie è stata in grado di trovare un ruolo come designer UX a New York City. Entrambi abbiamo lasciato il lavoro e ci siamo trasferiti da Seattle. Questo ha segnato l'inizio della mia prima immersione nella programmazione.

Due anni dopo

"Ehi, pensi di poter aggiornare il mio sito Web?"

Era giugno 2018 e molte cose erano cambiate. In quei due brevi anni, mia moglie era passata dal designer UX, al product designer, per progettare una startup. Voleva un nuovo aggiornamento per riflettere quella crescita.

"Sì, posso farlo."

Ho cercato di sembrare il più sicuro possibile, ma ero titubante. Mi sono ricordato quanto tempo ci è voluto per costruire il suo sito Web la prima volta. Non ero sicuro di avere la resistenza e la resistenza mentale per un secondo incontro. Mi aveva sfinito.

La mia autostima è stata ulteriormente scossa quando ho iniziato a scavare attraverso il vecchio codice. Non lo vedevo da due anni. Non era invecchiato bene. Mentre l'interfaccia utente funzionava ancora e sembrava buona, il front-end era un casino. Sembrava che fosse tenuto insieme da un nastro adesivo.

In termini di "odore di codice", puzzava come un fuoco del cassonetto.

Mentre mia moglie voleva solo un aggiornamento, navigare attraverso quella base di codice era laborioso. Sarebbe stato più facile iniziare da zero. Non ero elettrizzato all'idea di ricominciare da capo. Ma mentre mia moglie era cresciuta molto negli ultimi due anni, anche io. Ho colto l'occasione per riflettere su quanto avevo imparato.

Avvio fresco

Il primo giorno ho iniziato a costruire il nuovo sito Web di mia moglie, sapevo che non ci sarebbero voluti 3 mesi. Sono stato in grado di fare di più in quel primo giorno rispetto a prima in una settimana. Alla fine, è bastato un paio di settimane per terminare l'aggiornamento.

Puoi vederlo dal vivo qui: irissprague.co

irissprague.co

Anche se sono rimasto colpito dalla velocità con cui sono stato in grado di costruirlo, non ero esattamente sicuro del perché fosse stato molto più veloce. Certo, avevo altri due anni sotto la cintura, ma cosa avevo imparato esattamente in quei due anni?

Strumenti di leva

La prima cosa che ho notato è stata la mia capacità di sfruttare gli strumenti. Vedi, due anni prima, sapevo molto poco sugli strumenti open source. Il primo sito Web di mia moglie è stato realizzato utilizzando HTML, CSS, JavaScript e un tocco di PHP non elaborati. Anche se questo non è male in sé, non avevo idea dei modelli di vista.

Ho scritto ogni file HTML da zero. Per mantenere la coerenza, ho copiato tutti gli elementi ripetuti. Sfortunatamente, ciò significava che cambiare una pagina significava cambiarne diverse.

Al mio secondo tentativo, ho evitato tutte quelle ore di copia e debug utilizzando modelli HAML e Flexbox.

Grazie Flexbox

Automatizzare il processo di compilazione

Un altro motivo per cui il primo sito Web ha impiegato così tanto tempo è stato perché non avevo idea di un processo di compilazione. Per tutti i 3 mesi ho realizzato il primo sito portfolio di mia moglie, lo ho fatto localmente sulla mia macchina.

Ogni volta che ho fatto una grande modifica, avrei dovuto assillare mia moglie per venire a controllare le alterazioni sul mio laptop. Se ciò non bastasse, quando è arrivato il momento di inviare le mie modifiche a un server di produzione, non avevo idea da dove iniziare.

Ero stato così concentrato su come far funzionare il sito web che non avevo nemmeno considerato il modo in cui l'avrei messo su Internet. Non avevo mai sentito parlare di DigitalOcean, Docker o Heroku.

L'unico servizio di hosting che conoscevo all'epoca era Godaddy. Godaddy utilizza cPanel per caricare file sul server stesso. Sfortunatamente, cPanel ha permesso di caricare i file solo uno alla volta.

Ci sono volute ore. E ogni volta che dovevo cambiare una qualsiasi delle risorse, avrei dovuto ricaricare manualmente quei file modificati.

Con quegli errori bruciati nella mia memoria, ho investito nel migliorare il mio processo di compilazione. Ho automatizzato il mio flusso di lavoro CI / CD utilizzando Docker Compose. Con un comando up -d docker-compose, ho potuto distribuire l'intero sito in produzione.

Ho anche creato un piccolo script bash per raggruppare i miei comandi Git e Docker insieme.

Tutte le modifiche che ho apportato potrebbero essere attive in meno di un minuto. cPanel era un ricordo del passato.

Ho anche usato un DigitalOcean Droplet in modo che mia moglie potesse vedere tutte le modifiche che ho apportato. Poteva visualizzare le modifiche sul proprio computer visitando l'indirizzo IP del Droplet. Niente più sviluppo solo locale.

Mia moglie ed io abbiamo anche migliorato la nostra pipeline di progettazione e sviluppo. Nel 2016 i progetti sono stati realizzati principalmente tramite Photoshop e segnali orali.

“Puoi cambiarlo? Puoi aggiungerlo? "

Nessuno di noi è piaciuto.

Questa volta, io e mia moglie abbiamo usato Invision per collaborare. Ho potuto vedere le sue modifiche di progettazione in tempo reale e implementarle in pochi minuti.

Accoppiamento di potenza al suo meglio.

Risoluzione dei problemi migliorata

Non sarà una sorpresa, ma in questi 2 anni sono diventato un programmatore migliore e più veloce. Ma il miglioramento più importante sono state le mie capacità di problem solving.

Non ho avuto bisogno di cercare come creare griglie nei CSS o creare un carosello di immagini in JavaScript. Avevo gli strumenti e le basi di cui avevo bisogno per risolvere quei problemi da solo. Potrei passare più tempo nel flusso e meno tempo cercando su Google ogni problema che ho riscontrato.

Sapevo anche come fare di più con meno. Il mio primo sito aveva centinaia di righe di JavaScript per realizzare le animazioni più semplici. Il nuovo sito ha solo 70 linee. Le transizioni CSS e i fotogrammi chiave gestiscono il resto.

Assegnare la priorità ai CSS rispetto a JavaScript migliora le prestazioni di ogni pagina riducendo la pittura DOM. Tuttavia, non è stata l'unica ottimizzazione che ho fatto.

ottimizzazioni

Due anni fa non avevo idea di come creare un sito Web performante e non mi importava. Volevo solo che la dannata cosa funzionasse. Ora che ho capito i fondamenti e ho pensato a un livello più alto di astrazione, ho potuto concentrarmi sulla risoluzione dei problemi più grandi. Vale a dire, prestazioni ed esperienza utente.

Compilando i file statici, servendoli tramite una CDN DigitalOcean e memorizzandoli nella cache nel browser, il sito aggiornato è in grado di caricarsi alla velocità della luce.

Valutazione delle prestazioni da Pingdom

Nel 2016, quella frase precedente mi sarebbe sembrata senza senso. Oh, come sono cambiati i tempi.

Prenditi del tempo per apprezzare quanto hai imparato

Allora perché sto dicendo tutto questo? Per suonare il mio corno? Forse un po.

Il vero motivo è che voglio sottolineare l'importanza dell'autoriflessione. Ero titubante ad aggiornare il sito di mia moglie, perché non mi ero reso conto di quanto fossi cresciuto. È difficile vedere l'importo che progredisci su base giornaliera.

La conoscenza si accumula pollice per pollice. Ma guardando indietro per un lungo periodo di tempo, quei pollici diventano passi da gigante. Nella cultura giapponese, questa idea di piccoli miglioramenti quotidiani è conosciuta come "kaizen".

Per me è importante ricordare dove ero all'inizio della mia carriera. Visualizzare la mia evoluzione mi mantiene motivato quando raggiungo gli altipiani. I flussi e riflussi sono inevitabili. Impegnarmi a progredire di un pollice alla volta è il modo in cui avanzerò verso i miei obiettivi.

Quindi, come tributo alla padronanza e al ricordo delle mie radici, il primo sito di mia moglie vivrà come sottodominio del mio sito personale. Puoi vederlo da solo su kaizen.sunli.co.

Voglio dare un grido speciale alla Launch School per avermi insegnato l'importanza del lento cammino verso la padronanza. È un obiettivo che continuerò a perseguire.

E un altro acquisto a mia moglie Iris Sprague per essere semplicemente incredibile.

Quindi, sia che tu abbia programmato per 10 mesi, 10 anni o più, prenditi del tempo per riflettere su quanto hai imparato. Usalo come carburante per quando i tempi sembrano lenti. Investire nel percorso lento verso la padronanza ha aggravato i risultati. All'inizio graduale, ma con abbastanza tempo, ti librerai come un razzo.

Se questo articolo ha risuonato con te, ti preghiamo di lasciare alcuni applausi e fammi sapere come sei cresciuto nella tua carriera. Mi piacerebbe saperlo!

Come sempre, buona programmazione!