Merge pull request #459 from ArmandDelessert/patch-1-js-03-code-quality

Apporte plusieurs corrections au chapitre 1.3 (Code Quality)

Author: HachemiH

1-js/03-code-quality/01-debugging-chrome/article.md

@@ -18,13 +18,13 @@ Voici ce que vous devriez voir si vous le faites pour la première fois :
 
 ![](chrome-open-sources.svg)
 
-Le bouton <span class="devtools" style="background-position:-172px -98px"></span> ouvre l'onglet avec les fichiers.
+Le bouton <span class="devtools" style="background-position:-172px -98px"></span> ouvre le volet avec les fichiers.
 
 Cliquez dessus et sélectionnez `hello.js` dans l’arborescence. Voici ce qui devrait apparaître :
 
 ![](chrome-tabs.svg)
 
-Ici nous pouvons voir 3 parties : 
+Ici nous pouvons voir 3 parties :
 
 1. Le volet **explorateur de fichiers** répertorie les fichiers HTML, JavaScript, CSS et autres fichiers, y compris les images jointes à la page. Des extensions Chrome peuvent également apparaître ici.
 2. Le volet **Editeur de Code** affiche le code source.
@@ -60,7 +60,7 @@ Nous pouvons toujours trouver une liste de points d'arrêt dans le volet de droi
 - Sauter rapidement au point d'arrêt dans le code (en cliquant dessus dans le volet de droite).
 - Désactiver temporairement le point d'arrêt en le décochant.
 - Supprimer le point d'arrêt en cliquant avec le bouton droit de la souris et en sélectionnant Supprimer.
-- … Et ainsi de suite
+- … Et ainsi de suite.
 
 ```smart header="Points d'arrêt conditionnels"
 *Clic droit* sur le numéro de ligne permet de créer un point d'arrêt *conditionnel*. Il ne se déclenche que lorsque l'expression donnée, que vous devez fournir lors de sa création, est vraie.
@@ -123,7 +123,7 @@ Il y a des boutons pour cela en haut du volet de droite. Actionnons-les.
 <span class="devtools" style="background-position:-146px -168px"></span> -- "Reprendre" : continue l'exécution, raccourci clavier `key:F8`.
 : Reprend l'exécution. S'il n'y a pas de points d'arrêt supplémentaires, l'exécution continue et le débogueur perd le contrôle.
 
-    Voici ce que nous pouvons voir après un clic dessus : 
+    Voici ce que nous pouvons voir après un clic dessus :
 
     ![](chrome-sources-debugger-trace-1.svg)
 
@@ -137,11 +137,11 @@ Il y a des boutons pour cela en haut du volet de droite. Actionnons-les.
 <span class="devtools" style="background-position:-62px -192px"></span> -- "Step over": lance la commande suivante, mais *n'entre pas dans une fonction*, raccourci clavier `key:F10`.
  : Similaire à la commande "Step" précédente, mais se comporte différemment si l'instruction suivante est un appel de fonction (pas une fonction intégrée, comme `alert`, mais une fonction qui nous est propre).
 
-    Si nous les comparons, la commande "Step" entre dans un appel de fonction imbriqué et interrompt l'exécution à sa première ligne, tandis que "Step over" exécute l'appel de fonction imbriqué de manière invisible pour nous, en sautant les fonctions internes.
+Si nous les comparons, la commande "Step" entre dans un appel de fonction imbriqué et interrompt l'exécution à sa première ligne, tandis que "Step over" exécute l'appel de fonction imbriqué de manière invisible pour nous, en sautant les fonctions internes.
 
-    L'exécution est alors suspendue immédiatement après cette fonction.
+L'exécution est alors suspendue immédiatement après cette fonction.
 
-    C'est bien si nous ne sommes pas intéressés à voir ce qui se passe dans l'appel de fonction.
+C'est bien si nous ne sommes pas intéressés à voir ce qui se passe dans l'appel de fonction.
 
 <span class="devtools" style="background-position:-4px -194px"></span> -- "Step into", raccourci clavier `key:F11`.
 : Cela ressemble à "Step", mais se comporte différemment dans le cas d'appels de fonctions asynchrones. Si vous commencez seulement à apprendre le JavaScript, vous pouvez alors ignorer la différence, car nous n'avons pas encore d'appels asynchrones.
@@ -167,10 +167,10 @@ C’est pratique lorsque nous voulons faire plusieurs pas en avant, mais nous so
 
 Pour afficher quelque chose sur la console depuis notre code, utilisez la fonction `console.log`.
 
-Par exemple, cela affiche les valeurs de `0` à `4` sur la console : 
+Par exemple, cela affiche les valeurs de `0` à `4` sur la console :
 
 ```js run
-// open console to see
+// ouvrir la console pour visualiser
 for (let i = 0; i < 5; i++) {
   console.log("value,", i);
 }
@@ -183,14 +183,14 @@ Si nous avons assez de logging dans notre code, nous pouvons voir ce qui se pass
 ## Résumé
 
 Comme nous pouvons le constater, il existe trois méthodes principales pour suspendre un script :
-1. A breakpoint.
+1. Les points d'arrêt (breakpoint).
 2. Les instructions du `debugger`.
-3. Une erreur (si les outils de développement sont ouverts et le bouton <span class="devtools" style="background-position:-90px -146px"></span> est "on")
+3. Une erreur (si les outils de développement sont ouverts et le bouton <span class="devtools" style="background-position:-90px -146px"></span> est activé)
 
 En pause, nous pouvons déboguer -- examiner les variables et suivre le code pour voir où l’exécution s’est mal passée.
 
 Il y a beaucoup plus d'options dans les outils de développement que celles couvertes ici. Le manuel complet est ici <https://developers.google.com/web/tools/chrome-devtools>.
 
 Les informations de ce chapitre sont suffisantes pour commencer le débogage, mais plus tard, en particulier si vous utilisez beaucoup de fonctions de navigateur, allez-y et examinez les fonctionnalités plus avancées des outils de développement.
 
-Oh, et vous pouvez aussi cliquer sur différents endroits des outils de développement et voir ce qui s’affiche. C’est probablement la voie la plus rapide pour apprendre les outils de développement. Ne pas oublier le clic droit aussi les menus contextuels !
+Oh, et vous pouvez aussi cliquer sur différents endroits des outils de développement et voir ce qui s’affiche. C’est probablement la voie la plus rapide pour apprendre les outils de développement. N'oubliez pas le clic droit et les menus contextuels !

1-js/03-code-quality/02-coding-style/article.md

@@ -56,15 +56,15 @@ if (condition) {
 }
 ```
 
-Une construction sur une seule ligne, comme `if (condition) doSomething()`, est un cas important. Devrions-nous utiliser des accolades ? 
+Une construction sur une seule ligne, comme `if (condition) doSomething()`, est un cas important. Devrions-nous utiliser des accolades ?
 
 Voici les variantes annotées pour que vous puissiez juger de leur lisibilité :
 
-1. 😠 Les débutants font parfois cela. C'est une mauvaise pratique! Les accolades ne sont pas nécessaires :
+1. 😠 Les débutants font parfois cela. C'est une mauvaise pratique ! Les accolades ne sont pas nécessaires :
     ```js
     if (n < 0) *!*{*/!*alert(`Power ${n} is not supported`);*!*}*/!*
     ```
-2. 😠 Lorsque vous n'utilisez pas d'accolades, évitez de passer pas à la ligne, il est facile de se tromper! :
+2. 😠 Lorsque vous n'utilisez pas d'accolades, évitez de passer pas à la ligne car il est facile de se tromper :
     ```js
     if (n < 0)
       alert(`Power ${n} is not supported`);
@@ -80,14 +80,14 @@ Voici les variantes annotées pour que vous puissiez juger de leur lisibilité :
     }
     ```
 
-Pour un code tres court, une ligne est autorisée, par exemple. `if (cond) return null`. Mais la variante numéro 4 est généralement plus lisible.
-
+Pour un code tres court, une ligne est autorisée, par exemple `if (cond) return null`. Mais la variante numéro 4 est généralement plus lisible.
 
 ### Longueur de la ligne
 
-Personne n'aime lire une longue ligne horizontale de code. La meilleure pratique est de les scinder.
+Personne n'aime lire une longue ligne horizontale de code. La meilleure pratique est de la scinder.
 
 Par exemple :
+
 ```js
 // les guillemets backtick ` permettent de scinder la chaîne de caractères en plusieurs lignes
 let str = `
@@ -115,13 +115,13 @@ La longueur de ligne maximale est convenue au niveau de l'équipe. C’est gén
 
 Il existe deux types d'indentations :
 
-- **Un retrait horizontal : 2(4) espaces.**
+- **Un retrait horizontal : 2 ou 4 espaces.**
 
-    Une indentation horizontale est faite en utilisant 2 ou 4 espaces ou le symbole  horizontal de tabulation (key `key:Tab`). Lequel choisir est une vieille guerre sainte. Les espaces sont plus communs de nos jours.
+    Une indentation horizontale est faite en utilisant 2 ou 4 espaces ou le symbole  horizontal de tabulation (touche `key:Tab`). Lequel choisir est une vieille guerre sainte. Les espaces sont plus communs de nos jours.
 
     Un des avantages des espaces sur les tabulations est qu’ils permettent des configurations de retrait plus flexibles que le symbole tabulation.
 
-    Par exemple, nous pouvons aligner les arguments avec le crochet d’ouverture, comme ceci :
+    Par exemple, nous pouvons aligner les arguments avec la parenthèse d’ouverture, comme ceci :
 
     ```js no-beautify
     show(parameters,
@@ -164,7 +164,7 @@ Si vous êtes un programmeur JavaScript expérimenté, vous pouvez choisir un st
 
 Il ne devrait pas y avoir trop de niveaux d'imbrication.
 
-Par exemple, dans une boucle, c’est parfois une bonne idée d’utiliser la directive ["continue"](info:while-for#continue) pour éviter une imbrication supplémentaire. 
+Par exemple, dans une boucle, c’est parfois une bonne idée d’utiliser la directive ["continue"](info:while-for#continue) pour éviter une imbrication supplémentaire.
 
 Par exemple, au lieu d’ajouter un `if` imbriqué conditionnel comme ceci :
 
@@ -185,7 +185,7 @@ for (let i = 0; i < 10; i++) {
 }
 ```
 
-Une chose similaire peut être faite avec `if/else` et `return`.
+Une chose similaire peut être faite avec `if`/`else` et `return`.
 
 Par exemple, les deux constructions ci-dessous sont identiques.
 
@@ -203,7 +203,7 @@ function pow(x, n) {
     }
 
     return result;
-  }  
+  }
 }
 ```
 
@@ -228,7 +228,7 @@ function pow(x, n) {
 
 Le second est plus lisible, parce que le "cas marginal" de `n < 0` est traité tôt. Une fois la vérification effectuée, nous pouvons passer au flux de code "principal" sans avoir besoin d'imbrication supplémentaire.
 
-## Placement de Fonction
+## Placement des fonctions
 
 Si vous écrivez plusieurs fonctions "helper" (auxiliaires) et le code pour les utiliser, il existe trois façons de les placer.
 
@@ -283,9 +283,9 @@ C’est parce qu’en lisant du code, nous voulons d’abord savoir ce qu’il f
 
 ## Guides de style
 
-Un guide de style contient des règles générales sur "comment écrire" du code, ex: les quotes à utiliser, le nombre d'espaces pour indenter, la longueur de ligne maximale, etc. Beaucoup de petites choses.
+Un guide de style contient des règles générales sur "comment écrire" du code. Exemple : les quotes à utiliser, le nombre d'espaces pour indenter, la longueur de ligne maximale, etc. Beaucoup de petites choses.
 
-Au total, lorsque tous les membres d'une équipe utilisent le même guide de style, le code est uniforme. Peu importe qui l’a écrit, c’est toujours le même style.
+Lorsque tous les membres d'une équipe utilisent le même guide de style, le code est uniforme. Peu importe qui l’a écrit, c’est toujours le même style.
 
 Bien sûr, une équipe peut toujours écrire son propre guide de style, mais cela n’est généralement pas nécessaire. Il existe de nombreux guides existants à choisir.
 
@@ -349,6 +349,6 @@ De plus, certains IDE prennent en charge le linting nativement, ce qui peut éga
 
 Toutes les règles de syntaxe de ce chapitre et les guides de style visent à améliorer la lisibilité, elles sont donc toutes discutables.
 
-Lorsque nous pensons à écrire du "meilleur" code, les questions que nous devrions nous poser sont les suivantes : "Qu'est-ce qui rend le code plus lisible et plus facile à comprendre ?" Et "Qu'est-ce qui peut nous aider à éviter les erreurs ?" Telles sont les principales choses à garder à l'esprit lors du choix et du débat sur les styles de code.
+Lorsque nous pensons à écrire du "meilleur" code, les questions que nous devrions nous poser sont les suivantes : "Qu'est-ce qui rend le code plus lisible et plus facile à comprendre ?" et "Qu'est-ce qui peut nous aider à éviter les erreurs ?". Telles sont les principales choses à garder à l'esprit lors du choix et du débat sur les styles de code.
 
 Lisez les guides de style pour connaître les dernières idées à ce sujet et suivez celles que vous trouvez les meilleures.

1-js/03-code-quality/03-comments/article.md

@@ -4,7 +4,7 @@ Comme nous le savons du chapitre <info:structure>, les commentaires peuvent êtr
 
 Nous les utilisons normalement pour décrire comment et pourquoi le code fonctionne.
 
-De prime abord, les commentaires peuvent sembler évidents, mais les novices en programmation les utilise souvent à tort.
+De prime abord, les commentaires peuvent sembler évidents, mais les novices en programmation les utilisent souvent à tort.
 
 ## Mauvais commentaires
 
@@ -52,7 +52,7 @@ function showPrimes(n) {
   for (let i = 2; i < n; i++) {
     *!*if (!isPrime(i)) continue;*/!*
 
-    alert(i);  
+    alert(i);
   }
 }
 
@@ -177,4 +177,4 @@ Les bons commentaires nous permettent de bien maintenir le code, d'y revenir apr
 - Qui disent "comment fonctionne le code" et "ce qu'il fait".
 - Ne les mettez que s’il est impossible de rendre le code aussi simple et auto-descriptif qu’il n’en nécessite pas.
 
-Les commentaires sont également utilisés pour les outils de documentation automatique tels que JSDoc3: ils les lisent et génèrent des documents HTML (ou des documents dans un autre format).
+Les commentaires sont également utilisés pour les outils de documentation automatique tels que JSDoc3. Ils les lisent et génèrent des documents HTML (ou des documents dans un autre format).

1-js/03-code-quality/06-polyfills/article.md

@@ -72,7 +72,7 @@ if (!Math.trunc) { // si une telle fonction n'existe pas
 JavaScript est un langage très dynamique, les scripts peuvent ajouter/modifier toutes les fonctions, y compris celles intégrées.
 
 Deux librairies intéressantes de polyfills sont :
-- [core js](https://github.com/zloirock/core-js) qui prend en charge beaucoup, permet d'inclure uniquement les fonctionnalités nécessaires.
+- [core js](https://github.com/zloirock/core-js) qui prend en charge beaucoup de choses et permet d'inclure uniquement les fonctionnalités nécessaires.
 - [polyfill.io](https://polyfill.io) est un service qui fournit un script avec des polyfills, en fonction des fonctionnalités et du navigateur de l'utilisateur.
 
 
@@ -89,4 +89,3 @@ De bonnes ressources qui montrent l'état actuel de la prise en charge de divers
 - <https://caniuse.com/> - pour les fonctions liées au navigateur.
 
 P.S. Google Chrome est généralement le plus à jour avec les fonctionnalités du langage, essayez-le si une démonstration d'un tutoriel échoue. La plupart des démos de didacticiels fonctionnent avec n'importe quel navigateur moderne.
-

1-js/03-code-quality/index.md

@@ -1,3 +1,3 @@
 # Qualité du code
 
-Ce chapitre explique les pratiques de codage que nous utiliserons plus loin dans le développement.
+Ce chapitre explique les pratiques de codage que nous utiliserons plus loin dans le développement.