Apprendre à coder en écrivant des poèmes codés

En 2008, j'ai commencé à étudier le design et je me souviens clairement à quel point la simple vue du code m'intimidait. J'ai suivi des cours de codage et, sans aucune expérience préalable en matière de codage, j'ai eu du mal à comprendre le code avec lequel j'ai été en contact pour la première fois. Soudain, les mots auxquels j'étais habitué en anglais (comme « new », « return » et « throw/catch ») ont pris un tout nouveau sens ; la syntaxe cryptique, les points-virgules, les parenthèses et les règles complètement nouvelles ne m'ont pas facilité les choses.

Si vous débutez avec JavaScript et/ou avez des difficultés à l'ajouter à vos compétences, je peux vous proposer une approche pour surmonter ces obstacles. Vous n'êtes certainement pas seul et vous avez parfaitement le droit de penser qu'apprendre à coder est un problème difficile à résoudre.

Pourquoi est-il si difficile d'apprendre à coder ?

Voici quelques- unes des idées fausses sur les raisons pour lesquelles je pense que les gens ont du mal à apprendre ou à s'intéresser à JavaScript (ou à tout autre langage de codage) :

• Le code est cryptique, purement fonctionnel et effrayant ;
• Le code est destiné uniquement aux machines, afin que les gens ne se sentent pas concernés ou engagés ;
• Le code n'est pas traité comme un langage car il a un cas d'utilisation complètement différent et semble très différent de tout ce qu'ils ont vu auparavant ;
• Les gens pensent aux stéréotypes (hackers diaboliques, peut-être certains mecs de Matrix), et ne s'y identifient donc pas.
  

En tant que développeur, on attend de vous que vous traitiez le code d'une manière très spécifique, voire que vous pensiez d'une manière assez différente (et très logique). Les langages de codage sont assez stricts et intolérants ; un seul caractère peut empêcher la machine de comprendre ce que vous voulez dire et faire planter les applications. On s'attend à ce que vous ignoriez et supprimiez certaines choses que vous savez en parlant et en écrivant une langue humaine (ce qui est, soit dit en passant, également le cas lors de l'apprentissage d'une nouvelle langue humaine).

Mais tous les langages de programmation, documentations ou didacticiels vidéo sur le Web ne sont pas conçus avec cette "transition de l'humain au langage de programmation" à l'esprit. Bien sûr, ils n'ont pas à le faire. Après tout, le but principal du code est de dire aux machines quoi faire.

Pourtant, à cause de cet objectif, une chance de comparaison manque tout simplement et les langues que vous parlez (vocabulaire et règles) semblent être rendues inutiles pour apprendre un langage de programmation. Il n'y a pas de mot pour "amour" dans le langage JavaScript , et cela n'a pas de sens de dire "je t'aime". Une machine (ou un navigateur) ne sait tout simplement pas ou ne se soucie pas de l'amour (encore ?). Ce sentiment de « complètement nouveau » et de « je ne sais pas par où commencer » peut être effrayant comme l'enfer.

C'est pourquoi je suis ici. Je pense que vous pouvez apprendre JavaScript de manière beaucoup plus facile et artistique, en conservant vos connaissances en langage humain et en traitant JavaScript comme n'importe quel autre langage humain. Permettez-moi de démontrer avec un petit exemple.

Fait amusant : Certains langages de programmation ont en fait à l'esprit la transition d'un langage de programmation à un autre. C'est pourquoi il est tellement plus facile d'apprendre beaucoup de langages de programmation - juste en apprenant un seul.

Un petit exemple

Dans de nombreux cas, lorsque vous souhaitez exécuter du code JavaScript, vous souhaitez que le "document" (essentiellement le site Web, qu'un utilisateur télécharge à chaque visite) soit prêt pour que vous puissiez interagir avec des éléments HTML, par exemple. En JavaScript pur, vous pouvez tomber sur quelque chose comme ceci :

 (function() { // Your code goes here })();

(Beurk ! Dans ce cas, une fonction est définie entre crochets, puis immédiatement appelée avec une autre paire de crochets à la fin. C'est ce qu'on appelle un IIFE.)

Ou parfois comme ça :

 if (document.readyState === 'complete') { // Your code goes here }

Le premier extrait nécessite définitivement une explication, tandis qu'avec le second (et peut-être un peu de fantaisie), on pourrait comprendre qu'il y a une condition qui doit être remplie pour que quelque chose d'autre se produise simplement en le regardant.

Imaginez quelque chose comme ça, cependant:

 onceUponATime(function () { // Your code (story) goes here })

"Il était une fois" est quelque chose (oserais-je dire) que même un enfant pourrait comprendre. Il s'adresse au développeur (en se référant à des souvenirs d'enfance), tout en faisant théoriquement la même chose. C'est ce que je considère comme "avoir à l'esprit la transition entre l'humain et le langage de codage".

Note rapide sur les « fonctions » : une fonction est essentiellement une compétence, qui est inactive jusqu'à ce que vous l'appeliez. "Lire" est une function read() { … } , qui est appelée lorsque vous voulez lire quelque chose comme ceci : read() . Il y a aussi quelque chose appelé "fonctions anonymes", c'est-à-dire "function() { … } (n'a pas de nom, comme dans les extraits ci-dessus) qui sont essentiellement des "actions ponctuelles/occasionnelles" que vous ne considéreriez pas comme une compétence , comme "appuyer sur un bouton".

Renverser les rôles : du message à l'essentiel

Poussons donc cette idée un peu plus loin. Prenons les raisons et les idées fausses ci-dessus et renversons-les :

Un petit poème.

Écrit en JavaScript.

Fait pour les êtres humains.

A propos de l'amour entre deux individus.

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

Il n'est pas fonctionnel. Il n'est actuellement pas destiné aux machines. Il est destiné à vous de lire et de comprendre.

Si vous avez compris le message du poème, vous avez en fait compris un morceau de code JavaScript, que vous avez peut-être comparé à la langue anglaise.

Maintenant, vous pourriez vous demander : je comprends cela, mais pourquoi est-ce écrit comme ça ? Quelles sont les règles (grammaire) de cette langue ? Quelle est la signification de « moi » (au sens technique) et pourquoi ce code ressemble-t-il tellement à l'anglais ?

Règles, vocabulaire et variables

L'une des choses les plus importantes à comprendre lors de l'apprentissage d'un langage de programmation est le concept de variables .

Chaque langue humaine a ses règles (grammaire) et beaucoup de vocabulaire (prédéfini). De toute évidence, ces deux éléments doivent d'abord être appris afin de pouvoir parler la langue.

JavaScript, comme de nombreux autres langages de programmation, est également livré avec son propre ensemble de règles (par exemple, le . entre les mots ou comment if les instructions sont écrites) et son propre vocabulaire ( if , document , window , Event , etc.). Ces mots-clés sont réservés (ou 'pré-définis') par JavaScript (et le navigateur), et chacun d'eux a son but spécifique.

Mais comme je l'ai mentionné plus tôt, une chance de comparer les mots et les phrases que vous connaissez de la langue anglaise est apparemment manquante car il n'y a pas d'équivalents .

C'est là que les variables entrent en jeu; vous (le développeur) pouvez (ou même devez) définir les variables afin que les machines et les développeurs comprennent ce que signifie quelque chose. Les variables peuvent prendre de nombreuses formes (d'où leur nom) : elles peuvent être une chaîne de mots et de lettres (chaînes), un nombre, une action (fonction) ou même une collection (tableau). Vous le nommez.

Dans toutes les langues, il y a probablement un mot pour l'amour. Vous savez un peu ce que cela signifie, mais pas vraiment, car c'est tellement subjectif. Mais encore, il y a un mot pour cela.

Mais en JavaScript, il n'y a pas "d'amour", jusqu'à ce que vous disiez qu'il y en a. Cela peut être ce que vous voulez.

 var love = { color: 'red', duration: 365, loveTarget: 'cats', }; // a simple variable expression, // where love is an object “{ … }”, a thing // with some properties (color, duration, loveTarget).
 const love2 = { color: 'purple', duration: 'forever', loveTarget: 'dogs', } ;
 // également une expression variable, où love2 (une constante), // ne peut pas être complètement redéfinie / écrasée : // love2 = undefined; // => ne fonctionnera pas
 // ("undefined" est un mot-clé javascript prédéfini, // disant essentiellement "n'a aucune valeur")

Il est crucial de pouvoir faire la distinction entre ce qui est prédéfini en JavaScript (règles et vocabulaire JavaScript) et ce qui est réellement personnalisé par le développeur (également appelé « logique d'application » ou « logique métier »).

Revenant au poème écrit ci-dessus :

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

Ces expressions proviennent du vocabulaire/ensemble de règles JavaScript suivant :

 if (...) { ... } // if statement: when ... is met, do things in { ... } { inLove: true, } // an "object" with some info, some thing in the world. // can contain other info, and "skills" (functions). // "inLove" is a custom property, // "true" is pre-defined in javascript, (meaning: "yes") // and the value of "inLove". . // needed to access an objects property "my name: me.name" getDistanceTo() // an expression to "call" a function (a "skill"). // getDistanceTo is custom (not JavaScript), and a function, // so it can be executed / called upon with the "()" after. // sometimes you can pass arguments in those brackets (like "position") // to change the outcome of a function.

 me // an object, some thing in the world you // an object, some thing in the world position // an info about "you", accessed by the "." getDistanceTo // a skill of me, accessed by the "." getDistanceTo() // the skill, with javascript grammar telling: do it. getDistanceTo(position) // same, but do it with "position". setFeelings // another skill of me, accessed by the "." setFeelings({ inLove: true }); // the skill, with some instructions (an object).

 // This is how the definition of a being (me/you) could look like var me = { position: {x: 0, y: 0} // some coordinates, maybe getDistanceTo: function(position) { // calculate the distance, relative to own position }, setFeelings: function(feelings) { // handle those feelings... } } var you = { position: {x: 0, y: 0} // some coordinates, maybe } // the poem itself if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

Un exemple plus important : la poésie interactive en code

C'est ainsi que mon projet personnel LoveBits est né. LoveBits est une expérience d'apprentissage/de narration de code.

Il essaie d'intéresser les gens au JavaScript/au codage en :

• Donner la priorité à la lisibilité et au langage humain ;
• Combiner le code avec un art que le lecteur connaît peut-être déjà.

Côté histoire, il s'agit de deux Bits (êtres rectangulaires) ; l'un des Bits (blueBit) est le romantique et écrit des poèmes d'amour JavaScript à l'autre Bit (purpleBit).

Lorsque vous démarrez LoveBits, vous pouvez sélectionner l'un des multiples poèmes d'amour (écrits en JavaScript). Chaque poème a un extrait de code qui est écrit d'une manière qu'il est censé être compris par des personnes qui ne sont même pas familiarisées avec la programmation. La seule exigence est la langue anglaise.

"Coup de foudre" (en fait l'un des poèmes de LoveBits), par exemple, concerne ces deux Bits dans lesquels le blueBit dit en gros : "Si je me rapproche suffisamment de votre position, je vais 'définir mes sentiments' sur inLove: true .

La particularité de ces poèmes est que vous pouvez les "exécuter" ou les "jouer" simplement en appuyant sur le bouton "jouer" ci-dessous. Dans le cas de "Coup de foudre", vous verriez un rectangle bleu et violet avec un nombre. Comme vous l'avez peut-être déjà deviné, ce sont les deux bits mentionnés dans le poème, et le nombre sous le blueBit est en fait la distance entre le blueBit et le purpleBit.

Comme le suggère le poème, vous voudrez peut-être faire en sorte que le blueBit tombe amoureux du purpleBit en réduisant la distance entre eux, n'est-ce pas ? Alors que peux-tu faire? Vous pouvez interagir et faire glisser le blueBit et le faire tomber amoureux. Mais attention, il y a parfois plus d'un résultat.

On pourrait en fait dire que vous êtes la machine ici. C'est vous qui avez besoin d'interpréter du code JavaScript pour pouvoir agir et aider deux êtres numériques à tomber amoureux.

Où aller en partant d'ici?

Si vous êtes un développeur en difficulté, essayez de traiter JavaScript comme un langage humain et comprenez simplement ce que les extraits de code sont censés faire en premier au lieu de ce qu'ils finissent par faire.

Voici ce que je vous recommande de faire ensuite :

• Préférez toujours aller directement aux exemples et au code pour des applications entières qui combinent des règles, du vocabulaire et des variables pour former une logique d'application ;
• La logique d'application racontera les histoires qui vous aideront à combler les lacunes comme dans les exemples de code ci-dessus. Les bibliothèques de code et les utilitaires tels que lodash ne vous fourniront qu'un nouveau vocabulaire qui deviendra utile après avoir été capable de lire et de comprendre le code JavaScript ;
• Passez en revue le code existant et essayez de le décomposer en petites fonctions avec des noms qui reflètent ce qu'elles font. Écrivez du code qui s'adresse aussi bien aux humains qu'aux machines. Écrivez le code de manière à ce qu'il puisse être lu comme une phrase. Utilisez les commentaires partout où vous en avez besoin. Réfléchissez à : Comment pourrais-je exprimer cela dans un langage humain (à un autre développeur) ?

Conclusion

Apprendre à coder peut devenir plus facile une fois que vous commencez à traiter le code comme un langage humain et non comme quelque chose que des extraterrestres ont pu inventer. Apprendre à faire la distinction entre les fonctionnalités du langage (intégrées) et les variables/le code personnalisé pour la logique de l'application est crucial. Être capable de comprendre la logique de l'application vous placera dans une position puissante pour améliorer et changer les choses, sans même connaître les fonctionnalités du langage.

Message avant les bases : Comprenez le message de n'importe quel extrait de code, et les bases de JavaScript suivront naturellement. Combien de fois avez-vous entendu quelqu'un dire : « Je comprends la langue, mais je ne la parle pas encore » ? C'est un processus naturel, qui peut et peut-être devrait être appliqué à l'apprentissage des langages humains et de codage.

De plus, gardez toujours à l'esprit que le code a un objectif fonctionnel clair, mais qu'il ne doit pas toujours en être ainsi. Même les langages humains étaient autrefois purement fonctionnels, mais ensuite il y a eu des poèmes et même des chansons (des chansons JavaScript, n'importe qui ?), qui ont connecté les gens de manière totalement différente. Je pense, ou j'espère, que la même chose peut s'appliquer ici.

Explorez toujours les projets de code, et peut-être même essayez-vous d'écrire un poème vous-même (peut-être même dans un autre langage de programmation que vous connaissez) ? J'ai aimé créer le projet LoveBits et j'aimerais voir certaines de vos idées dans les commentaires ci-dessous !

Lectures complémentaires

• « Si Hemingway écrivait JavaScript », Angus Croll
  C'est l'un de mes livres préférés sur lequel je suis tombé par hasard après LoveBits. Il s'agit de plusieurs poètes et artistes célèbres, et de la façon dont ils auraient écrit des extraits de code JavaScript. C'est hilarant!