Quello che ho imparato sullo sviluppo front-end dai 12 ai 22 anni

Foto di Teddy Kelley su Unsplash

A volte, i miei amici mi chiedono come sono arrivato allo sviluppo front-end. Direi che mi sono imbattuto in esso; ma la verità era che non lo sapevo davvero. Quindi la scorsa settimana, ho fatto un tuffo negli angoli bui di Internet per scavare in tutti i progetti front-end su cui ho lavorato da quando avevo 12 anni.

E ragazzo, era un tuffo.

Quindi eccoli qui. Ogni decisione terribile, ogni sito web imbarazzante, ogni errore e lezione appreso che mi ha reso lo sviluppatore front-end che sono oggi. Eccoli, nella loro piena gloria non filtrata.

(Se stai appena iniziando nello sviluppo front-end, ho incluso pepite di conoscenza che ho imparato lungo la strada che spero ti faranno risparmiare tempo nel tuo viaggio. Se sei un esperto ... Spero che questa storia ti dà una risatina o due )

12 anni

Lasciami impostare la scena. Era il 2007. Steve Jobs aveva appena presentato l'iPhone. Tutti stavano usando MSN Messenger. A nessuno è piaciuto Windows Vista. Queste erano cose che ricordo, ma non ricordo quando esattamente ho deciso di creare un sito web.

Mi è piaciuta l'idea che qualcosa messo sul web possa essere visto da chiunque in tutto il mondo, come la magia. Sicuramente non potrebbe essere così difficile. Può?

Il mio primo sito Web: un viaggio di mille passi ... inizia con tendoni e widget flash?

Mi sbagliavo. Era difficile. Non avevo idea di cosa stavo facendo.

Ad un certo punto, non sono nemmeno riuscito a capire come utilizzare un tag
, che crea un'interruzione di riga. Ero confuso perché un'interruzione di riga regolare nel codice non rendesse un'interruzione simile sulla pagina web. Ho provato a usare i tag

che creano paragrafi, ma non capivo il concetto di wrapping. Ho anche provato a creare una tabella solo per iniziare una nuova linea.

A peggiorare le cose, nonostante tutto quel duro lavoro, era ancora orribile (anche per gli anni 2000). Ricordo che i miei compagni di classe lo prendevano in giro quando condividevo il collegamento con loro su MSN Messenger. Poi di nuovo, potrei biasimarli? Aveva ogni atrocità del Web 1.0: gif, tendoni, sfondi scarsamente piastrellati, widget Flash ... lo chiami. Mi sono scoraggiato. E così, ho imparato la mia prima lezione.

Il tuo primo progetto sarà negativo. La mia prima pagina HTML è stata terribile. Il mio primo file CSS era così disordinato che Marie Kondo non l'avrebbe toccato. La mia prima app mobile è stata ignorata. La mia prima app React andava in crash ogni minuto. L'apprendimento del front-end è difficile perché è l'intersezione di molte idee dal design e dall'informatica, ed è bene non ottenerlo la prima volta.
Prometto che diventa più facile. Nel tempo, ti renderai conto di aver sviluppato una serie di competenze trasferibili (HTML, ad esempio, ti aiuterà a costruire componenti React e layout di attività Android). Riconoscere che sei cattivo in qualcosa è il primo passo per essere bravo nel front-end.

Sapevo che era male, ma sapevo anche che avrei potuto fare di meglio. Quindi per Halloween, con l'aiuto di Gimp, ho ravvivato il sito con una nuova mano di zucche e tipografia evanescente. Ehi, ha persino avuto un gioco di avventura originale in cui i giocatori hanno salvato un mondo fantastico con la magia

Durante la riprogettazione, ho anche imparato un trucco accurato. Mi sono reso conto che non c'era nascondiglio nel mondo di HTML e CSS. Ogni tecnica, ogni segreto era solo una View Source di distanza. Nemmeno Apple potrebbe nascondere i segreti delle loro splendide pagine di prodotti e passerei ore sul loro sito a svelare i loro misteri.

Se qualcun altro potesse farlo, allora anche io.

Da qualche parte lungo la strada, i miei compagni di classe hanno smesso di prendermi in giro.

Visualizza la fonte. Ogni volta che vedi qualcosa di interessante su un sito Web, chiediti se puoi riprodurlo. Potresti farlo con solo CSS? JavaScript? In caso contrario, fai clic destro su di esso> fai clic su "Ispeziona" (Chrome) o Strumenti> Sviluppatore Web> Inspector (Firefox) e prova a decodificare il codice. Aggiungi un segnalibro o mantieni un elenco di fantastici effetti che vorresti provare un giorno.

14 anni

Prima di Snapchat e Instagram, i bambini avevano blog. Tutti i miei amici ne avevano uno. Molti di loro sono stati felici di personalizzare i loro blog con temi standard. Ma nessun padre, non io. Oh no

Ho iniziato modificando i temi esistenti per me stesso. Quindi, creerei temi come regali per i compleanni dei miei amici. Bambini di altre classi sono venuti a chiedermi temi. Sono diventato il tipo blogskin.

Mi sono davvero innamorato delle strisce

E così è iniziata la mia vera incursione in HTML. Ogni tema era un documento HTML a pagina singola con CSS incorporato. Usando pseudo tag come <$ BlogItemTitle $>, ho potuto controllare come e dove era posizionato ciascun elemento. Gli pseudo tag verranno successivamente sostituiti dal contenuto effettivo dal fornitore del servizio. Infine, ero libero dai confini degli editor WYSIWYG!

Così tanto, tripod.com!

Ricordo di aver passato ore a spostare elementi con CSS, imparando le differenze tra tipi di visualizzazione e posizione, margini e padding. Per un tema particolare, ho usato strisce a quattro colori come sfondo statico dietro un primo piano bianco con motivi trasparenti. Ogni elemento doveva essere perfettamente allineato, quindi lo schema si è rivelato quando l'utente ha fatto scorrere:

Un sito a scorrimento orizzontale, così spigoloso!

Ho adorato sviluppare temi. Mi sono reso conto che una pagina web non era solo 2D, ma rispondeva a persone con pseudo-selettori JavaScript e CSS, come: hover e: active. Sono cresciuti e ridotti, sbiaditi dentro e fuori.

Era una superficie viva e interattiva.

Se ben fatte, queste interazioni hanno deliziato le persone e mi è piaciuto molto osservare le reazioni dei miei amici ai loro nuovi temi. Mi sono spinto a provare nuove idee e tecniche per scoprire cosa piaceva alla gente.

evSviluppare per le interazioni. Sono individuabili buoni elementi front-end (fornisce indizi su come usarlo) e fornisce feedback (reagisce alle interazioni in modo informativo). Ad esempio, un pulsante può cambiare i colori di sfondo al passaggio del mouse e aumentare l'opacità quando si fa clic. Ecco un buon video e un libro sull'argomento.

16 anni

Nel luglio 2013, ho registrato il mio primo dominio con un host web adeguato Mi è sembrato un rito di passaggio, come se stessi finalmente facendo qualcosa di reale. Ho creato il mio portafoglio e da allora ha ospitato i miei progetti ed esperimenti. Quando ho acquisito nuove competenze, è cresciuto e si è evoluto accanto a me.

Crescono così in fretta

Non posso sopravvalutare quanto utile sia stato avere un dominio e un buon host server per me. Potrei sperimentare nuove idee front-end sul web. Ho eseguito lavori cron che mi hanno semplificato la vita. Ogni volta che avevo bisogno di un nuovo spazio per un cliente o un lavoro scolastico, potevo creare un nuovo sottodominio.

Mi sono sentito un ragazzo grande quando ho distribuito il mio primo sito Web. Mi sembrava quasi di poter fare cose del genere per vivere. Sarebbe piuttosto bello, ho pensato tra me e me.

Crea un portfolio. Questo è un grande progetto per imparare a implementare sul Web. Le opzioni semplici includono FTP, che consente di copiare i file su e servirli da un server. Una volta che ti senti a tuo agio, ti consiglio di impostare l'integrazione continua e Git. Ho provato diversi provider prima di finire con l'hosting condiviso su Dreamhost (link affiliato) di cui sono rimasto estremamente soddisfatto. Ma ci sono sicuramente alternative gratuite là fuori.

18 anni

A Singapore, i diciottenni devono passare due anni nell'esercito. Per un colpo di fortuna, fui inviato in un'unità dell'esercito in cerca di uno sviluppatore mobile. Mi hanno chiesto se avevo già fatto qualcosa del genere prima. Non l'ho fatto, ma quanto potrebbe essere diverso dallo sviluppo di un sito Web? Quindi ho detto di si.

Si scopre che mi sbagliavo. Ma hey, a quel punto, non ero uno che permettesse alla mancanza di esperienza o qualifiche di fermarmi.

Premettiamo questo dicendo che sebbene avessi lavorato con alcuni JavaScript in precedenza, non avevo un concetto di programmazione orientata agli oggetti, che era particolarmente importante nello sviluppo di app. Il mio primo compito era sviluppare un'app Android per un'API esistente che consenta ai soldati di chiamare malati. Il mio secondo è stato quello di creare un gioco educativo.

Ho trascorso giorni su Google e StackOverflow, ponendo centinaia di domande basilari come "Come faccio a creare un campo di testo" o "Come faccio a fare un pulsante per fare le cose". Ho trascorso settimane a sbattere la testa sulla tastiera per NullPointerExceptions. Dalla pelle dei miei denti, sono riuscito a sfornare qualcosa a metà decente.

Anche se le app sembravano attraenti, il codice dietro era tutt'altro. C'erano linee e righe di codice spaghetti, nessun modello architettonico chiaro e la logica era più strettamente accoppiata di una recinzione a maglie di catena. Era impossibile da mantenere e, per questo motivo, nessuna delle app che ho creato poteva essere attivamente aggiornata.

Sarebbero passati diversi anni prima che leggessi come scrivere codice front-end pulito e scalabile. Ma quando l'ho fatto, ho capito perché era importante.

🧪 Scrivi test. Scrivere test è probabilmente l'abitudine più efficace che ho preso per scrivere codice migliore. Ricordi come quando hai imparato a programmare, hai scritto funzioni che hanno provato a superare diversi casi di test? È così, ma ora sei anche tu a scrivere i test! Scrivere buoni test per ogni funzione (unit test) consente di assicurarsi che il codice funzioni anche quando si modificano altre parti della base di codice.
Separa le tue responsabilità. Hai una funzione che sta facendo più cose? Dividili in più funzioni. Hai una classe con diversi blocchi di metodi che implementano diverse funzionalità? Dividili in più classi. La separazione delle responsabilità è forse il più importante dei Principi SOLIDI. Rende il tuo codice leggibile e scalabile. Codice pulito: un manuale di Agile Software Artigianato (link di affiliazione) di Robert Martin è un must per qualsiasi sviluppatore front-end.

20 anni

A giugno 2016 ho pubblicato un'app sul Google Play Store. Aiuta gli studenti a conoscere la fisica, che era una materia che ho sempre amato. Il primo giorno aveva 3 download. Il secondo giorno aveva 5. Il terzo giorno ne aveva 1.000. Inizialmente non l'avevo notato, ma i numeri continuavano a crescere. Nel suo primo mese, ha ricevuto 7000 download. A settembre, le installazioni mensili erano cresciute fino a 15.000.

Come? Non avevo fatto nessun marketing.

Si scopre che qualcuno ha condiviso l'app su Reddit (due volte!) E alla gente sembrava piacere. È stato raccolto da numerosi siti e blog di recensioni. Le persone hanno iniziato a fare video al riguardo su YouTube. A questo punto, ero così eccitato che stavo ottenendo palpitazioni. Penso di aver pianto ad un certo punto. Sembrava che tutto il mio duro lavoro stia finalmente ripagando.

Sono stato riportato a quando ho creato temi per i blog dei miei amici come regali per il loro compleanno. Invece, ora, stavo facendo regali a migliaia di persone in tutto il mondo. All'improvviso mi sono reso conto di quanto amassi sviluppare interfacce che potessero aiutare le persone. Quella gente amava.

La parte migliore di questa esperienza è stata conoscere le persone che usano la mia app. Ho risposto ad ogni commento su Reddit e ho accolto con favore le e-mail su eventuali domande di fisica che le persone potrebbero avere. A volte, ho ricevuto dei messaggi adorabili, come questo:

Questa è la mia e-mail preferita, da un'app che ho creato prima
Scegli un progetto che ti interessa. Hai letto i libri. Hai fatto il corso Codecademy. Hai imparato i mondi ciao e le funzioni ricorsive. E adesso? Pensa intensamente a quali aree sei un relativo esperto. Sei un buongustaio? Un birdwatcher? Un maestro di curiosità? Pensa a qualcosa che vorresti usare. Pensa a come puoi aiutare le persone intorno a te o ad un oceano di distanza. Scorri le app sul tuo telefono: puoi migliorarle?
Se pensi di aver trovato qualcosa, immergiti. Non aspettare fino a quando non sei pronto, non aspettare il permesso. Lanciati nel profondo; cavalcare gli alti e bassi dello sviluppo front-end. È così che crei qualcosa che fa la differenza.

di 22 anni

Ho continuato a esplorare nuove idee e tecniche, lavorando su progetti che mi sono appassionato. Alcuni di questi sono stati molto impegnativi, ma avevo imparato a sfruttare ciò che so. Lo sviluppo front-end è pieno di competenze trasferibili.

React è stata una rivelazione. Dopo anni di separazione delle visioni dalla logica, è stata una boccata d'aria fresca trovare un framework che integri elegantemente HTML, dati e logica. Era come se avessi tagliato gli alberi con un coltello da burro in tutti questi anni e qualcuno mi avesse appena consegnato una motosega.

Android è ora un piacere lavorare con. Molti punti dolenti sono stati curati e Kotlin è un piacere scrivere. Alcune delle migliori menti del mondo stanno lavorando per migliorare lo sviluppo del front-end mobile, con React Native, Flutter e molti altri.

È un grande momento per essere uno sviluppatore front-end.

Un paio di anni fa, ho sviluppato una landing page con il motto: sei più talentuoso di quanto immagini. Vorrei che qualcuno me lo avesse fatto sapere quando avevo 12 anni, poiché stavo per arrendermi dopo il mio primo fallimento.

Un insegnante di recitazione in seguito mi ha detto che il talento non era altro che la somma del duro lavoro. In questo modo, sono stato molto fortunato che gli eventi mi abbiano portato ad iniziare il mio viaggio in anticipo. Sono grato per le persone che ho incontrato lungo la strada che mi hanno guidato e mi hanno affidato, un adolescente maldestro, con i loro affari e idee. È iniziato come un hobby solitario per molti anni, ma ora ho amici che condividono le mie passioni.

Sono passati 10 anni fantastici e non vedo l'ora che arrivi il prossimo.

Trova la tua community. Nessuna persona è un'isola e nessun sviluppatore front-end è un elemento div flottante isolato. Unisciti ai tuoi Meetup front-end locali. Vai alle conferenze. Segui i repository git che stai utilizzando. Scrivi alle pubblicazioni. Ascolta i podcast. Scorri in alcuni DM di Twitter. Trova le persone che ti diranno: hai più talento di quanto immagini.

Ti è piaciuta questa storia? Mi piacerebbe mettermi in contatto!
Saluta Twitter, LinkedIn o visita il mio sito Web.