Come ho (ri) costruito l'effetto di applauso medio - e cosa ho ottenuto dall'esperimento.

Il risultato

Quattro anni fa, ho letto una citazione che mi avrebbe cambiato la vita per sempre.

Non ricordo le circostanze circostanti, ma il sole era molto caldo ed ero sulla pagina dei risultati di una ricerca su Google.

È apparsa una famosa citazione di Pablo Picasso e per le settimane successive mi sono completamente perso.

Buoni artisti copiano; i grandi artisti rubano
- Pablo Picasso

Che cosa? Lo intendeva davvero?

Mentre molte domande mi facevano girare la testa, dovevo leggere di più su chi fosse Pablo.

Pablo Picasso è stato un artista considerato uno dei più influenti e grandi del XX secolo. A questo punto, sapevo che non era un errore andare in giro a parlare di spazzatura.

Ho continuato la mia vita, ma quella citazione non mi ha mai lasciato.

Anni dopo, ero diventato un astuto seguace della filosofia del "rubare". Era così radicato nel mio subconscio che un giorno avrei pensato di scrivere un bestseller del New York Times sull'argomento.

La vita è successa Non ho mai avuto modo di scrivere il libro :(

Ho applicato la regola a quasi tutto ciò che ho fatto.

Ad esempio, ho trascorso ore a riscrivere a mano diversi codici (creati da altri) a mano, il tutto nel tentativo di imparare qualcosa rubando. All'inizio di quest'anno, ho visto Dan Abramov parlare di qualcosa di simile.

Dopotutto non ero pazzo.

La regola del furto sembra essere una regola generale per la padronanza.

Nel suo libro, Peak: Secrets from the new science of expertise, Anders Ericsson parla del circuito di feedback e di quanto sia essenziale padroneggiarlo. In effetti, questa era la stessa tecnica usata da Benjamin Franklin per scrivere libri incredibili. Era probabilmente uno dei migliori scrittori americani del suo tempo.

Questa mentalità e questo metodo di apprendimento mi hanno portato a tentare di ricreare l'effetto di applauso medio.

L'esperimento

Il Medium Clap è stato progettato e costruito da persone con almeno cinque volte più intelligenti di me. Ma questa non è stata la prima volta che ho ricreato roba di altre persone. Il Medium Clap era solo uno dei tanti progetti simili.

Ho sempre trovato l'applauso medio essere così soddisfacente. Molte volte ho applaudito dopo il segno 50 solo per sentire quell'animazione soddisfacente.

Costruire l'applauso medio è stato un esperimento interessante. L'obiettivo non era quello di creare un clone esatto, solo qualcosa che funzionasse così.

Tecnologia che ho usato

Per i contenuti, ho usato un buon vecchio HTML e un po 'di SVG. Ho ricevuto un'icona applauso dal Progetto Noun.

SVG Creato da Luis Durazo dal Progetto Noun

Ho aperto l'icona di applauso in Illustrator e l'ho modificata in base al mio cuore. Ho quindi ottimizzato tramite SVGOMG.

Avevo bisogno di Javascript per l'interattività. Quindi, ho costruito l'applauso con vanillaJS e poi l'ho biforcuta per ricostruire tramite ReactJS.

Per le animazioni, ho scelto il mo.js. di LegoMushroom Sembrava il migliore per ricreare le animazioni di applauso medio. Mo.js è una libreria di animazione piuttosto interessante con un'API dichiarativa. Trovo che sia anche molto amichevole per i principianti.

Come ho iniziato

Non ero particolarmente sicuro da dove cominciare. Ho avuto qualche esperienza con SVG, ma non ho avuto molta esperienza con mo.js.

Al momento non c'era alcun applauso medio "funzionante" su codepen. Non c'era niente da imparare lì.

Quindi ho rubato di nuovo.

"Dev'esserci qualcosa online da cui posso imparare", mi sono detto. Dopo un paio di ricerche fallite ho trovato qualcosa.

I Codrops di Mary Lou sono una risorsa incredibile per materiale pratico di frontend. Ho cercato e trovato alcune icone animate lì.

Le icone animate di codrops sono state ispirate da questo scatto di Daryl Grinn

Le icone non assomigliavano affatto al battito medio, ma c'era sicuramente qualcosa da imparare lì.

Sai cosa ho fatto, vero?

Ho creato da zero le icone animate di codrops. Ho copiato l'intero codice a mano.

Questo mi ha dato molte prospettive, e ho saputo come procedere dopo l'applauso medio.

Come impari molto velocemente?

Oltre a costruire le icone animate di codrops, non ho avuto un'esperienza sostanziale con mo.js

Non è stato un grosso problema. Ero sempre stato eccitato dalla prospettiva di apprendere qualcosa di nuovo più velocemente e avevo sviluppato un sistema per apprendere velocemente le cose.

Nel 2012, Scott Young ha completato tutti i 33 corsi del leggendario curriculum informatico del MIT, dall'algebra lineare alla teoria del calcolo, in meno di un anno. È diventato rapidamente la mia ispirazione.

Questo curriculum del MIT avrebbe dovuto essere un programma di quattro anni, ma in qualche modo è riuscito a domarlo sistematicamente in meno di 12 mesi.

Credo nell'ultra apprendimento. È un'abilità così importante nell'economia di oggi.

Allora, qual era il piano?

Prima di tutto, avevo bisogno di copertura. Copertura attorno al terreno mo.js. Come dice Scott, non puoi pianificare un attacco se non hai una mappa del terreno.

Innanzitutto, ho sfogliato i tutorial ufficiali di mo.js. Ne ho saltati alcuni, a dire il vero. Ho visto un video di YouTube in cui Sarah Drasner ha spiegato come funzionava la libreria mo.js. Guardo il video a velocità 2X. Ho anche letto il libro di Sarah, SVG Animations. C'era un capitolo dedicato alla libreria mo.js.

Ho letto molto velocemente.

Tutto ciò di cui avevo bisogno a questo punto era una copertura su come funzionava la biblioteca e cosa era possibile con essa.

Dopo questi, sono passato a mettere le mie conoscenze al lavoro. Era tempo di costruire l'applauso medio.

Dopo aver trascorso molto tempo nelle animazioni, ho finito per farlo bene. Qualcosa che non ha fatto schifo.

Configurazioni di esempio per le animazioni fornite da mo.js

Mi sono bloccato in alcuni punti. Ho fatto errori e ho anche passato alcuni giorni a modificare le cose. Ma sì, l'ho fatto funzionare.

Qual e il punto?

Credo nel mettermi continuamente alla prova. Spingendomi appena oltre ciò che penso di sapere o di poter fare.

Questo è stato solo un altro esperimento in tal senso.

È stato un esperimento fallito?

Non lo direi.

L'11 ottobre, la penna è stata scelta e ha continuato a essere vista da oltre 2.000 persone.

Ho tenuto un discorso al Summit di ReactJS, Lagos, su SVG e Microinterazioni. Lì, ho parlato di micro interazioni nel contesto delle app ReactJS e ho mostrato come costruire l'effetto di applauso medio.

Conclusione

Sono venuto a trovare un nuovo amore per le micro interazioni e credo che siano i piccoli giganti che fanno un ottimo prodotto.

Nel complesso, è stato un esperimento interessante e fruttuoso. Non me ne pento. Affatto.

Ho intenzione di ricreare alcuni progetti più ambiziosi? Inferno sì!

Ma hey, è un discorso per un altro giorno :)

Continua a costruire, continua a scrivere codice!