Apprendre à coder en écrivant des poèmes de code

Apprendre à coder peut être difficile. Dans cet article, Murat partage son avis sur la façon dont l'écriture de code différemment et poétiquement l'a aidé à surmonter ses luttes initiales et ses insécurités.

En 2008, j'ai commencé à étudier le design et je me souviens très bien de la façon dont la vue du code m'a intimidé. J'ai eu quelques cours de codage, et sans aucune expérience de codage préalable, j'ai eu du mal à comprendre le code avec lequel je suis entré en contact pour la première fois. Soudainement, les mots auxquels j'étais habitué en anglais (tels que "new", "return" et "throw / catch") prenaient une tout autre signification; la syntaxe énigmatique, les points-virgules, les parenthèses et les règles complètement nouvelles ne m'ont pas simplifié la vie.

Si vous êtes novice en JavaScript et que vous avez du mal à l'ajouter à vos compétences, j'ai peut-être une approche à surmonter ces barrières. Vous n'êtes certainement pas seul, et vous avez tout à fait le droit de penser que l'apprentissage du code est difficile à résoudre.

Pourquoi apprendre à coder si fort?

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

• Le code est énigmatique, purement fonctionnel et effrayant
• Le code ne concerne que les machines.
• Le code n'est pas traité comme un langage parce qu'il a un cas d'utilisation complètement différent et qu'il est très différent de tout ce qu'il a déjà vu
• Les gens pensent aux stéréotypes (pirates malfaisants, peut-être Matrix). Non, nous ne pouvons pas faire de tours de magie, mais nous avons des articles, des livres et des webinars présentant des techniques que nous pouvons tous utiliser pour améliorer notre travail. Les Smashing Members obtiennent une sélection chevronnée d'astuces magiques – par ex. sessions de conception en direct et audits de perf, aussi. Il suffit de dire ! 😉

  
  Explorez Smashing Wizardry →
        

En tant que développeur, vous devez traiter le code d'une manière très spécifique – même penser de manière très différente (et hautement 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 de faire planter les applications. Vous êtes censé ignorer et ignorer certaines choses que vous connaissez en parlant et en écrivant un langage humain (ce qui est également le cas lors de l'apprentissage d'un nouveau langage humain).

Mais pas tous les langages de programmation, documentations ou didacticiels le web est fait en pensant à cette "transition de l'humain à la programmation". Bien sûr, ils n'ont pas à le faire. Après tout, le but principal du code est de dire aux machines ce qu'il faut faire.

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

C'est pourquoi je suis ici. Je pense que vous pouvez apprendre le JavaScript d'une 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 le passage d'un langage de programmation à un autre. C'est pourquoi il est tellement plus facile d'apprendre beaucoup de langages de programmation – juste en en apprenant un seul.

Un petit exemple

Dans beaucoup de cas, quand vous voulez exécuter du code JavaScript, vous voulez le " document "(essentiellement le site Web, un utilisateur télécharge à chaque visite) pour être prêt afin que vous puissiez interagir avec des éléments HTML, par exemple. En pur JavaScript, vous pouvez trébucher sur quelque chose comme ceci:

 (function () {
   // Votre code va ici
}) ();

(Yuck! ? Dans ce cas, une fonction est définie entre parenthèses, puis immédiatement appelée avec une autre paire de parenthèses à la fin, ce que l'on appelle un IIFE .)

Ou parfois comme ceci:

 if (document.readyState === 'complete') {
  // Votre code va ici
}

Le premier extrait nécessite définitivement une explication, alors qu'avec le second (et peut-être un peu de fantaisie), on peut 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 () {
  // Votre code (histoire) va ici
})

"Il était une fois" 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 la transition du langage humain vers le codage»

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

Transformer les tables: du message à l'essentiel

Prenons donc cette idée un peu plus loin: prenons les raisons et les idées fausses ci-dessus et les transformons à l'envers:

Un petit poème

Ecrit en JavaScript

Fait pour les êtres humains

A propos de l'amour entre deux individus.

 // Coup de foudre
if (me.getDistanceTo (you.position) <200) {
  me.setFeelings ({
    inLove: vrai,
  });
}

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

Si vous avez reçu le message du poème, vous avez effectivement compris un morceau de code JavaScript, que vous pourriez avoir comparé à la langue anglaise.

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

Règles, vocabulaire et variables

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

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

JavaScript, comme beaucoup d'autres langages de programmation, vient aussi avec son propre ensemble de règles (par exemple, . les mots ou comment si déclarations sont écrites) et son propre vocabulaire ( si document fenêtre Événement ]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 la langue anglaise est apparemment manquante parce que il n'y a pas d'équivalents .

C'est là qu'interviennent les variables; vous (le développeur) pouvez (ou même avoir) définir les variables afin que les machines et les développeurs comprennent ce que signifie quelque chose. Les variables peuvent prendre beaucoup de formes (d'où le 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, parce que c'est tellement subjectif. Mais encore, il y a un mot pour ça.

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 que ce soit.

 var love = {
  La couleur rouge',
  durée: 365,
  loveTarget: 'les chats',
}
// une expression de variable simple,
// où l'amour est un objet "{...}", une chose
// avec quelques propriétés (couleur, durée, loveTarget).

 const amour2 = {
  couleur violet',
  durée: 'pour toujours',
  loveTarget: 'chiens',
}; 

 // aussi une expression de variable, où love2 (une constante),
// ne peut pas être redéfini / écrasé complètement:
// 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 distinguer entre ce qui est prédéfini en JavaScript (règles JavaScript et vocabulaire), et ce qui est réellement défini par le développeur (aussi appelé «logique applicative» ou «logique métier») »

Revenons au poème écrit plus haut:

 // Coup de foudre
if (me.getDistanceTo (you.position) <200) {
  me.setFeelings ({
    inLove: vrai,
  });
}

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

 if (...) {...}
// if statement: when ... est rencontré, fait les choses dans {...}

 {
    inLove: vrai,
}
// un "objet" avec quelques infos, quelque chose dans le monde.
// peut contenir d'autres informations, et "compétences" (fonctions).
// "inLove" est une propriété personnalisée,
// "true" est prédéfini en javascript, (ce qui signifie: "oui")
// et la valeur de "inLove". 

.
// nécessaire pour accéder à une propriété d'objets "mon nom: me.name" 

 getDistanceTo ()
// une expression pour "appeler" une fonction (une "compétence").
// getDistanceTo est personnalisé (pas JavaScript), et une fonction,
// donc il peut être exécuté / appelé avec le "()" après.
// parfois vous pouvez passer des arguments entre parenthèses (comme "position")
// pour changer le résultat d'une fonction.
 

Et ce sont les variables (où vous avez le libre arbitre de définir leurs noms et leur comportement):

 moi // un objet, quelque chose dans le monde
vous // un objet, quelque chose dans le monde
position // une information sur "vous", accessible par le "."
getDistanceTo // une compétence de moi, accessible par le "."
getDistanceTo () // la compétence, avec la grammaire javascript qui dit: faites-le.
getDistanceTo (position) // identique, mais faites-le avec "position".
setFeelings // une autre compétence de moi, accessible par le "."
setFeelings ({inLove: true}); // la compétence, avec quelques instructions (un objet).

Supposons que le poème soit maintenant lisible par l'homme. Vous avez peut-être compris le message, vous pourriez également voir la différence entre les règles de langage JavaScript que vous devez suivre, et les choses que vous avez à faire vous-même (les variables).

Mais qu'en est-il de la machine? Si la machine (le navigateur) lisait ce poème, cela ferait une erreur. La machine a besoin d'une définition de "moi" et de "vous" car elle essaie d'accéder à ses propriétés (via le . dans me.getDistanceTo () ). Avec la capacité de distinction mentionnée ci-dessus, vous pouvez réellement concevoir "moi" et "vous" pour rendre le poème exécutable / lisible par machine, comme ceci:

 // Voici comment la définition d'un être (moi / vous) pourrait ressembler

 var me = {
  position: {x: 0, y: 0} // quelques coordonnées, peut-être
  getDistanceTo: function (position) {
    // calcule la distance, par rapport à la position propre
  },
  setFeelings: function (sentiments) {
    // gérer ces sentiments ...
  }
} 

 var vous = {
  position: {x: 0, y: 0} // quelques coordonnées, peut-être
} 

 // le poème lui-même
if (me.getDistanceTo (you.position) <200) {
  me.setFeelings ({
    inLove: vrai,
  });
}
 

Alors qu'est-ce qui s'est passé ici?

• Nous lisons un poème en JavaScript, écrit avec JavaScript "grammaire" avec le seul but d'être compris par les êtres humains.
• Après avoir compris le message, vocabulaire, et variables, pour comprendre la structure du poème (grammaire et bases de JavaScript).
• Avec cette distinction, nous avons conçu le reste des variables de poèmes, avec des règles JavaScript afin de le rendre exécutable par une machine (dans

Cela a été possible parce que nous avons traité JavaScript comme la langue anglaise

Un plus grand exemple: la poésie interactive du code

C'est ainsi qu'est né mon projet personnel "LoveBits". LoveBits est une expérience d'apprentissage de code / storytelling

Il essaie d'intéresser les gens à JavaScript / codage par:

• Mettre la lisibilité et le langage humain en premier
• En combinant le code avec un art, le lecteur pourrait déjà être familier avec

Storywise, 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 (écrit en JavaScript). Chaque poème a un extrait de code écrit de manière à être compris par des personnes qui ne connaissent même pas la programmation. La seule exigence est la langue anglaise

"Love at first sight" (en réalité l'un des poèmes LoveBits), par exemple, concerne ces deux bits dans lesquels le blueBit dit essentiellement: "Si je Rapprochez-vous suffisamment de votre position, je vais «mettre mes sentiments» à inLove: true . "

La chose spéciale à propos de ces poèmes est que vous pouvez" courir "ou" les jouer "simplement par en appuyant sur le bouton "play" ci-dessous. Dans le cas de "Coup de foudre", vous verriez un rectangle bleu et violet accompagné d'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 en dessous du blueBit est en réalité la distance entre le blueBit et le purpleBit.

Comme le suggère le poème, vous pouvez faire le blueBit tomber amoureux du purpleBit en réduisant la distance entre eux, non? Alors que peux-tu faire? Vous pouvez interagir et faire glisser le blueBit autour, et le faire tomber amoureux. Mais attention, parfois il y a plus qu'un seul résultat.

On pourrait dire que vous êtes la machine ici. Vous êtes celui qui doit interpréter le code JavaScript pour pouvoir agir et aider deux êtres numériques à tomber amoureux.

Si vous êtes un développeur en difficulté, essayez de traiter JavaScript comme un humain et je comprends juste 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:

• Toujours préférer les exemples et le code pour des applications entières qui combinent les règles, le vocabulaire et les variables pour former une logique d'application;
• La logique de l'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 que du nouveau vocabulaire qui deviendra utile après avoir lu et compris 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'ils font. Écrivez du code qui s'adresse aux humains et aux machines. Écrivez le code de telle sorte qu'il puisse être lu comme une phrase. Utilisez des commentaires partout où vous en avez besoin. Pensez à: Comment exprimer ceci 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. Apprendre à faire la distinction entre les fonctionnalités linguistiques (built-ins) et les variables / code personnalisé pour la logique applicative est crucial. Être capable de comprendre la logique de l'application vous mettra 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 : Comprendre le message de tout extrait de code et les bases de JavaScript suivra 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 doit être appliqué pour l'apprentissage des langues humaines et codantes.

Aussi, gardez toujours à l'esprit que le code a un objectif fonctionnel clair, mais il n'a pas toujours être comme ça. Même les langues humaines étaient purement fonctionnelles une fois, mais ensuite il y avait des poèmes et même des chansons (des chansons en JavaScript, n'importe qui?), Qui connectaient les gens de manière totalement différente.

Toujours explorez les projets de code et peut-être même essayez d'écrire vous-même un poè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

Further Reading

• " Si Hemingway a écrit JavaScript ," Angus Croll
  C'est l'un de mes livres préférés sur lequel je suis tombé après LoveBits. Il s'agit de plusieurs poètes et artistes célèbres, et comment ils auraient écrit des extraits de code JavaScript. C'est hilarant!

(rb, ra, il)