Hvordan jeg (gen) byggede Medium clap-effekten - og hvad jeg kom ud af eksperimentet.

Resultatet

For fire år siden læste jeg et citat, der ville ændre mit liv for evigt.

Jeg kan ikke huske de omkringliggende omstændigheder, men solen flammede varmt, og jeg var på resultatsiden for en Google-søgning.

Et berømt Pablo Picasso-citat dukkede op, og i de næste par uger var jeg helt fortabt i det.

Gode ​​kunstnere kopierer; store kunstnere stjæler
- Pablo Picasso

Hvad? Mente han det virkelig?

Da flere spørgsmål holdt mit sind snurret, måtte jeg læse mere om, hvem Pablo var.

Pablo Picasso var en kunstner, der betragtes som en af ​​de mest indflydelsesrige og største i det 20. århundrede. På dette tidspunkt vidste jeg, at han ikke havde nogen fiasko med at tale omkring affald.

Jeg fortsatte med mit liv, men det citat forlod mig aldrig.

År efter var jeg blevet en god tilhænger af "stjæle" -filosofien. Det var så indgroet i min underbevidsthed, at jeg troede, at jeg en dag ville skrive en New York Times bestseller om emnet.

Livet skete. Jeg har aldrig skrevet bogen :(

Jeg anvendte reglen på næsten alt, hvad jeg gjorde.

For eksempel brugte jeg timer på at skrive flere codepens (bygget af andre) for hånd, alt sammen for at lære noget ved at stjæle. Tidligere i år så jeg Dan Abramov tale om noget lignende.

Jeg var trods alt ikke skør.

Steal-reglen ser ud til at være en generel regel for mestring.

I sin bog, Peak: Secrets from the new science of expertise, fortæller Anders Ericsson om feedback loop og hvor vigtigt det er at mestre. Det var faktisk den samme teknik, som Benjamin Franklin brugte til at skrive utrolige bøger. Han var uden tvivl en af ​​de bedste amerikanske forfattere i sin tid.

Denne tankegang og indlæringsmetode førte til, at jeg forsøgte at genskabe Medium clap-effekten.

Eksperimentet

Medium klappen blev designet og bygget af mennesker med mindst fem gange den smarts som jeg har. Men dette var ikke første gang, jeg genskabte andre menneskers ting. Medium klappen var blot et af mange sådanne projekter.

Jeg har altid fundet, at Medium-klappen er så tilfredsstillende. Mange gange har jeg klappet efter 50-mærket bare for at føle den tilfredsstillende animation.

At opbygge Medium klappen var et interessant eksperiment. Målet var ikke at skabe en nøjagtig klon, bare noget der fungerede som det.

Teknologi, jeg brugte

Til indhold brugte jeg god ol 'HTML og noget SVG. Jeg fik et klapikon fra Noun Project.

SVG Oprettet af Luis Durazo fra Noun Project

Jeg åbnede klapikonet i Illustrator og redigerede det til mit hjerte indhold. Derefter optimerede jeg via SVGOMG.

Jeg havde brug for Javascript for interaktivitet. Så jeg byggede klappen med vanillaJS og gaffelede den derefter til genopbygning via ReactJS.

Til animationer valgte jeg LegoMushroom's mo.js. Det syntes at være det bedste til at genskabe Medium clap-animationer. Mo.js er et temmelig interessant animationsbibliotek med et deklarativt API. Jeg finder det også meget begyndervenligt.

Hvordan jeg startede

Jeg var ikke særlig sikker på, hvor jeg skulle starte. Jeg havde nogle erfaringer med SVG, men havde ikke meget erfaring med mo.js.

På dette tidspunkt var der ikke noget "fungerende" Medium klap på kodestykker. Der var intet at lære der.

Så jeg stjal igen.

”Der skal være noget online, jeg kan lære af,” sagde jeg til mig selv. Efter et par mislykkede søgninger fandt jeg noget.

Mary Lou's Codrops er et helvede af en ressource til praktiske frontend-ting. Jeg søgte og fandt nogle animerede ikoner der.

De codrops animerede ikoner blev inspireret af dette skud af Daryl Grinn

Ikonerne lignede ikke det mellemstore klap, men der var bestemt noget at lære der.

Ved du hvad jeg gjorde, ikke?

Jeg byggede codrops-animerede ikoner fra bunden op. Jeg kopierede hele kodebasen for hånd.

Dette gav mig et stort perspektiv, og jeg vidste, hvordan jeg skulle gøre noget ved Medium klappet bagefter.

Hvordan lærer du virkelig hurtigt?

Bortset fra at opbygge codrops-animerede ikoner, havde jeg ikke betydelig erfaring med mo.js

Det var ikke en stor ting. Jeg havde altid været begejstret over udsigten til at lære noget nyt hurtigere, og jeg havde udviklet et system til at lære ting hurtigt.

I 2012 afsluttede Scott Young alle 33 kurser i MITs sagnomsætede computervidenskabsplaner fra Linear Algebra til Theory of Computation på mindre end et år. Han blev hurtigt min inspiration.

Denne MIT-pensum skulle være et fire-årigt pensum, men på en eller anden måde formåede han systematisk at temme det på under 12 måneder.

Jeg tror på ultra learning. Det er en så vigtig færdighed i dagens økonomi.

Så hvad var planen?

Først og fremmest havde jeg brug for dækning. Dækning omkring mo.js-terrænet. Som Scott siger, kan du ikke planlægge et angreb, hvis du ikke har et kort over terrænet.

Først skummede jeg gennem de officielle mo.js-tutorials. Jeg sprang over nogle for at være ærlige. Jeg så en YouTube-video, hvor Sarah Drasner forklarede, hvordan mo.js-biblioteket fungerede. Jeg ser videoen i 2X hastighed. Jeg læste også Sarahs bog, SVG Animations. Der var et kapitel dedikeret til mo.js-biblioteket.

Jeg læste meget hurtigt.

Alt hvad jeg havde brug for på dette tidspunkt var dækning af, hvordan biblioteket fungerede, og hvad der var muligt med det.

Efter disse gik jeg videre med at udbrede min viden til at fungere. Det var tid til at opbygge Medium klappen.

Efter at have brugt meget tid på animationerne, endte jeg med at få det rigtigt. Noget, der ikke sutter.

Eksempelkonfigurationer til animationerne, der er drevet af mo.js

Jeg blev fast på nogle punkter. Jeg begik fejl og tilbragte endda et par dage på at finpusse ting. Men ja, jeg fik det til at arbejde.

Hvad er pointen?

Jeg tror på kontinuerligt at udfordre mig selv. Skubber mig lige ud over hvad jeg tror, ​​jeg kender eller kan gøre.

Dette var blot endnu et eksperiment i den henseende.

Var det et mislykket eksperiment?

Jeg vil ikke sige det.

Den 11. oktober blev pennen plukket ud og blev set af over 2.000 mennesker.

Jeg holdt et foredrag på ReactJS-topmødet, Lagos, om SVG og mikrointeraktioner. Der talte jeg om mikrointeraktioner i sammenhæng med ReactJS-apps og fik vist, hvordan man opbygger Medium klapp-effekten.

Konklusion

Jeg er kommet for at finde en ny kærlighed til mikrointeraktioner, og jeg tror, ​​de er de små giganter, der laver et godt produkt.

I alt var det et interessant og frugtbart eksperiment. Jeg fortryder det ikke. Slet ikke.

Planlægger jeg at genskabe nogle mere ambitiøse projekter? Helvede ja!

Men hej, det er en snak til en anden dag :)

Bliv ved med at bygge, hold kodning!