Comment j’ai (re) construit l’effet de claquement moyen – et ce que j’ai retiré de l’expérience.

Il y a quatre ans, j’ai lu une citation qui allait changer ma vie pour toujours.

Je ne me souviens pas des circonstances environnantes, mais le soleil était brûlant et j’étais sur la page de résultats d’une recherche Google.

Une célèbre citation de Pablo Picasso est apparue, et pendant les semaines suivantes, j’étais complètement perdu dedans.

Les bons artistes copient; les grands artistes volent

– Pablo Picasso

Quoi? Voulait-il vraiment dire cela?

Étant donné que plusieurs questions me faisaient tourner la tête, je devais en savoir plus sur qui était Pablo.

Pablo Picasso était un artiste considéré comme l’un des plus influents et des plus grands du 20e siècle. À ce stade, je savais qu’il n’était pas un échec en parlant de poubelle.

J’ai raconté ma vie, mais cette citation ne m’a jamais quitté.

Des années après, j’étais devenu un adepte avisé de la philosophie du «vol». C’était tellement ancré dans mon subconscient que j’ai pensé qu’un jour j’écrirais un best-seller du New York Times sur le sujet.

J’ai appliqué la règle à presque tout ce que j’ai fait.

Par exemple, j’ai passé des heures à réécrire à la main plusieurs codepens (construits par d’autres), le tout dans le but d’apprendre quelque chose en volant. Plus tôt cette année, j’ai vu Dan Abramov parler de quelque chose de similaire.

Je n’étais pas fou après tout.

La règle de vol semble être une règle générale de maîtrise.

Dans son livre, Peak: Secrets from the new science of expertise , Anders Ericsson parle de la boucle de rétroaction et de l’importance de la maîtrise. En fait, c’était la même technique que Benjamin Franklin utilisait pour écrire des livres incroyables. Il était sans doute l’un des meilleurs écrivains américains de son temps.

Cet état d’esprit et cette méthode d’apprentissage m’ont amené à tenter de recréer l’effet de claquement moyen.

L’expérience

Le clap moyen a été conçu et construit par des personnes au moins cinq fois plus intelligentes que moi. Mais ce n’était pas la première fois que je recréais les trucs d’autres personnes. Le clap moyen n’était qu’un des nombreux projets de ce type.

J’ai toujours trouvé que le clap moyen était si satisfaisant. Plusieurs fois, j’ai applaudi après la barre des 50 juste pour ressentir cette animation satisfaisante.

Construire le clap moyen était une expérience intéressante. Le but n’était pas de créer un clone exact, juste quelque chose qui fonctionnait comme ça.

Technologie que j’ai utilisée

Pour le contenu, j’ai utilisé du bon vieux HTML et du SVG. J’ai une icône de clap du projet Noun.

J’ai ouvert l’icône de claquement dans Illustrator et l’ai modifiée à ma guise. J’ai ensuite optimisé via SVGOMG.

J’avais besoin de Javascript pour l’interactivité. Donc, j’ai construit le clap avec vanillaJS, puis je l’ai forké pour le reconstruire via ReactJS.

Pour les animations, j’ai choisi mo.js. de LegoMushroom. Cela semblait être le meilleur pour recréer les animations de clap moyen. Mo.js est une bibliothèque d’animation assez intéressante avec une API déclarative. Je le trouve également très convivial pour les débutants.

Comment j’ai commencé

Je ne savais pas par où commencer. J’avais une certaine expérience avec SVG, mais je n’avais pas beaucoup d’expérience avec mo.js.

Pour le moment, il n’y avait pas de clap moyen “fonctionnel” sur codepen. Il n’y avait rien à apprendre là-bas.

Alors j’ai encore volé.

“Il doit y avoir quelque chose en ligne dont je puisse apprendre”, me suis-je dit. Après quelques recherches infructueuses, j’ai trouvé quelque chose.

Les Codrops de Mary Lou sont une sacrée ressource pour des éléments pratiques sur le frontend. J’ai cherché et trouvé des icônes animées là-bas.

Les icônes ne ressemblaient en rien au clap moyen, mais il y avait certainement quelque chose à apprendre là-bas.

Vous savez ce que j’ai fait, non?

J’ai construit les icônes animées codrops à partir de zéro. J’ai copié toute la base de code à la main.

Cela m’a donné beaucoup de recul, et j’ai su comment m’y prendre par la suite.

Comment apprenez-vous vraiment vite?

À part la création d’icônes animées codrops, je n’avais pas d’expérience substantielle avec mo.js

Ce n’était pas grave. J’avais toujours été enthousiasmé par la perspective d’apprendre quelque chose de nouveau plus rapidement, et j’avais développé un système pour apprendre rapidement des choses.

En 2012, Scott Young a suivi les 33 cours du légendaire programme d’informatique du MIT, de l’algèbre linéaire à la théorie du calcul, en moins d’un an. Il est rapidement devenu mon inspiration.

Ce programme du MIT était censé être un programme de quatre ans, mais il a réussi à l’apprivoiser systématiquement en moins de 12 mois.

Je crois en l’ultra apprentissage. C’est une compétence tellement importante dans l’économie d’aujourd’hui.

Alors, quel était le plan?

Tout d’abord, j’avais besoin d’une couverture. Couverture autour du terrain mo.js. Comme Scott le dit, vous ne pouvez pas planifier d’attaque si vous n’avez pas de carte du terrain.

Tout d’abord, j’ai parcouru les didacticiels officiels de mo.js. J’en ai sauté quelques-uns, pour être honnête. J’ai vu une vidéo youtube où Sarah Drasner expliquait le fonctionnement de la bibliothèque mo.js. Je regarde la vidéo à une vitesse 2X. J’ai également lu le livre de Sarah, SVG Animations. Il y avait un chapitre dédié à la bibliothèque mo.js.

Je lis très vite.

Tout ce dont j’avais besoin à ce stade était une couverture sur le fonctionnement de la bibliothèque et ce qui était possible avec.

Après cela, je suis passé à mettre mes connaissances en pratique. Il était temps de construire le clap moyen.

Après avoir passé beaucoup de temps sur les animations, j’ai fini par faire les choses correctement. Quelque chose qui n’a pas été nul.

Je suis resté bloqué à certains moments. J’ai fait des erreurs et j’ai même passé quelques jours à peaufiner des choses. Mais oui, je l’ai fait fonctionner.

À quoi ça sert?

Je crois qu’il faut constamment me remettre en question. Me pousser juste au-delà de ce que je pense savoir ou pouvoir faire.

Ce n’était qu’une autre expérience à cet égard.

Le test a-t-il échoué?

Je ne le dirais pas & # x27; t.

Le 11 octobre, le stylo a été choisi et a été vu par plus de 2 000 personnes.

J’ai donné une conférence au ReactJS Summit, à Lagos, sur SVG et Microinteractions. Là, j’ai parlé de micro interactions dans le contexte des applications ReactJS et j’ai pu montrer comment créer l’effet de clap moyen.

Conclusion

Je suis venu pour trouver un nouvel amour pour les micro-interactions, et je crois que ce sont les petits géants qui font un excellent produit.

Dans l’ensemble, c’était une expérience intéressante et fructueuse. Je ne le regrette pas. Pas du tout.

Est-ce que j’ai l’intention de recréer des projets plus ambitieux? Enfer ouais!

Mais bon, c’est une discussion pour un autre jour 🙂

Continuez à construire, continuez à coder!