Merge pull request #367 from javascript-tutorial/sync-45934deb

Sync with upstream @ 45934de

Author: HachemiH

1-js/02-first-steps/08-operators/article.md

@@ -205,7 +205,11 @@ Un extrait du [tableau de précédence](https://developer.mozilla.org/en-US/docs
 | 2          | affectation     | `=`     |
 | ...        | ...             | ...     |
 
+<<<<<<< HEAD
 Comme on peut le voir, le "plus unaire" a une priorité de `15`, ce qui est supérieur à `12` pour "l'addition" (plus binaire). C’est pourquoi, dans l’expression `"+apples + +oranges"`, les plus unaires fonctionnent en premier, puis l’addition.
+=======
+As we can see, the "unary plus" has a priority of `15` which is higher than the `12` of "addition" (binary plus). That's why, in the expression `"+apples + +oranges"`, unary pluses work before the addition.
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 ## Affectation
 

1-js/02-first-steps/17-arrow-functions-basics/article.md

@@ -48,7 +48,11 @@ Comme vous pouvez le voir `(a, b) => a + b` représente une fonction qui accepte
     alert( double(3) ); // 6
     ```
 
+<<<<<<< HEAD
 - Sans arguments, les parenthèses seront alors vides (mais elles doivent êtres présentes) :
+=======
+- If there are no arguments, parentheses are empty, but they must be present:
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
     ```js run
     let sayHi = () => alert("Hello!");
@@ -76,9 +80,15 @@ Elles sont très utile pour des actions sur une ligne et que l'on est juste pare
 
 ## Les fonctions fléchées multiligne
 
+<<<<<<< HEAD
 L'exemple ci-dessous prend les arguments sur la gauche de `=>` et évalue le coté droit avec ces arguments.
 
 Parfois nous avons besoin de plus de compléxité, comme des expressions multiples ou des déclarations. Cela est possible avec des accolades les délimitant. Il faut ensuite utiliser un `return` à l'intérieur de celles-ci.
+=======
+The arrow functions that we've seen so far were very simple. They took arguments from the left of `=>`, evaluated and returned the right-side expression with them.
+
+Sometimes we need a more complex function, with multiple expressions and statements. In that case, we can enclose them in curly braces. The major difference is that curly braces require a `return` within them to return a value (just like a regular function does).
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 Comme cela :
 
@@ -105,7 +115,14 @@ Pour l'instant, nous pouvons les utiliser pour des actions sur une ligne ou des
 
 ## Résumé
 
+<<<<<<< HEAD
 Les fonctions fléchées sont pratiques pour les déclarations sur une ligne. Elles ont deux syntaxes :
 
 1. Sans accolades : `(...args) => expression` -- le coté droit est une expression : la fonction l'évalue et retourne le résultat.
 2. Avec accolades : `(...args) => { body }` -- les accolades nous permet des déclarations multiples au sein de la fonction, mais nous devons ajouter un `return` pour retourner quelque chose.
+=======
+Arrow functions are handy for simple actions, especially for one-liners. They come in two flavors:
+
+1. Without curly braces: `(...args) => expression` -- the right side is an expression: the function evaluates it and returns the result. Parentheses can be omitted, if there's only a single argument, e.g. `n => n*2`.
+2. With curly braces: `(...args) => { body }` -- brackets allow us to write multiple statements inside the function, but we need an explicit `return` to return something.
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f

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

@@ -38,7 +38,11 @@ Si nous appuyons sur `key:Esc`, une console s'ouvre ci-dessous. Nous pouvons tap
 
 Une fois une instruction exécutée, son résultat est présenté ci-dessous.
 
+<<<<<<< HEAD
 Par exemple, ici `1+2` donne `3`, et `hello("débogueur")` ne renvoie rien, le résultat est donc `undefined` :
+=======
+For example, here `1+2` results in `3`, while the function call `hello("debugger")` returns nothing, so the result is `undefined`:
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 ![](chrome-sources-console.svg)
 
@@ -62,13 +66,22 @@ Nous pouvons toujours trouver une liste de points d'arrêt dans le volet de droi
 - Supprimer le point d'arrêt en cliquant avec le bouton droit de la souris et en sélectionnant Supprimer.
 - … Et ainsi de suite
 
+<<<<<<< HEAD
 ```smart header="Points d'arrêt conditionnels"
 Un *clic droit* sur le numéro de ligne permet de créer un point d'arrêt conditionnel. Cela ne se déclenche que lorsque l'expression donnée est vraie.
+=======
+```smart header="Conditional breakpoints"
+*Right click* on the line number allows to create a *conditional* breakpoint. It only triggers when the given expression, that you should provide when you create it, is truthy.
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 C’est pratique lorsque nous devons nous arrêter uniquement pour une certaine valeur de variable ou pour certains paramètres de fonction.
 ```
 
+<<<<<<< HEAD
 ## Commande du débogueur
+=======
+## The command "debugger"
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 Nous pouvons également suspendre le code en utilisant la commande `debugger`, comme ceci :
 
@@ -84,8 +97,12 @@ function hello(name) {
 }
 ```
 
+<<<<<<< HEAD
 C’est très pratique lorsque vous utilisez un éditeur de code et que vous ne souhaitez pas passer au navigateur et rechercher le script dans les outils de développement pour définir le point d’arrêt.
 
+=======
+Such command works only when the development tools are open, otherwise the browser ignores it.
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 ## Pause et regarder autour
 
@@ -99,7 +116,11 @@ Veuillez ouvrir les menus déroulants d’information à droite (indiqués par d
 
 1. **`Watch` -- affiche les valeurs actuelles pour toutes les expressions.**
 
+<<<<<<< HEAD
     Vous pouvez cliquer sur le plus `+` et entrer une expression. Le débogueur affichera sa valeur à tout moment, en la recalculant automatiquement au cours de l'exécution.
+=======
+    You can click the plus `+` and input an expression. The debugger will show its value, automatically recalculating it in the process of execution.
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 2. **`Call Stack` -- affiche la chaîne des appels imbriqués.**
 
@@ -134,12 +155,21 @@ Il y a des boutons pour cela en haut du volet de droite. Actionnons-les.
 
     En cliquant dessus encore et encore, vous parcourrez toutes les instructions de script une par une.
 
+<<<<<<< HEAD
 <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`.
 : Semblable à la précédente commande "Step", mais se comporte différemment si l'instruction suivante est un appel de fonction. C’est-à-dire qu’il ne s’agit pas d’une fonction intégrée, comme `alert`, mais d’une fonction propre.
 
     La commande "Step" y pénètre et met en pause l'exécution à la première ligne, tandis que "Step over" exécute l'appel de fonction imbriqué de manière invisible, en ignorant les éléments internes de la fonction.
 
     L'exécution est alors suspendue immédiatement après cette fonction.
+=======
+<span class="devtools" style="background-position:-62px -192px"></span> -- "Step over": run the next command, but *don't go into a function*, hotkey `key:F10`.
+: Similar to the previous "Step" command, but behaves differently if the next statement is a function call (not a built-in, like `alert`, but a function of our own).
+
+    If we compare them, the "Step" command goes into a nested function call and pauses the execution at its first line, while "Step over" executes the nested function call invisibly to us, skipping the function internals.
+
+    The execution is then paused immediately after that function call.
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
     C'est bien si nous ne sommes pas intéressés à voir ce qui se passe dans l'appel de fonction.
 
@@ -154,8 +184,13 @@ Il y a des boutons pour cela en haut du volet de droite. Actionnons-les.
 <span class="devtools" style="background-position:-61px -74px"></span> -- active / désactive tous les points d'arrêt.
 : Ce bouton ne déplace pas l'exécution. Juste un ensemble de on/off pour les points d'arrêt.
 
+<<<<<<< HEAD
 <span class="devtools" style="background-position:-90px -146px"></span> -- active/désactive la pause automatique en cas d'erreur.
 : Lorsque cette option est activée et que les outils de développement sont ouverts, une erreur de script interrompt automatiquement l'exécution. Ensuite, nous pouvons analyser les variables pour voir ce qui ne va pas. Donc, si notre script meurt avec une erreur, nous pouvons ouvrir le débogueur, activer cette option et recharger la page pour voir où il meurt et quel est le contexte à ce moment.
+=======
+<span class="devtools" style="background-position:-90px -146px"></span> -- enable/disable automatic pause in case of an error.
+: When enabled, if the developer tools is open, an error during the script execution automatically pauses it. Then we can analyze variables in the debugger to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what's the context at that moment.
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 ```smart header="Continue to here"
 Un clic droit sur une ligne de code ouvre le menu contextuel avec une excellente option appelée "Continue to here".
@@ -187,7 +222,11 @@ Comme nous pouvons le constater, il existe trois méthodes principales pour susp
 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")
 
+<<<<<<< HEAD
 En pause, nous pouvons déboguer -- examiner les variables et suivre le code pour voir où l’exécution s’est mal passée.
+=======
+When paused, we can debug: examine variables and trace the code to see where the execution goes wrong.
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 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>.
 

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

@@ -42,7 +42,11 @@ Habituellement, un développeur exécute le transpiler sur son propre ordinateur
 
 En parlant de noms, [Babel](https://babeljs.io) est l'un des transpileurs les plus connus.
 
+<<<<<<< HEAD
 Les systèmes de construction de projets modernes, tels que [webpack](http://webpack.github.io/), fournissent des moyens pour exécuter un transpiler automatiquement à chaque changement de code, il est donc très facile à intégrer dans le processus de développement.
+=======
+Modern project build systems, such as [webpack](https://webpack.js.org/), provide means to run transpiler automatically on every code change, so it's very easy to integrate into development process.
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 ## Les polyfills
 
@@ -82,7 +86,11 @@ Dans ce chapitre, nous aimerions vous motiver à étudier les fonctionnalités d
 
 N'oubliez pas d'utiliser un transpiler (si vous utilisez une syntaxe ou des opérateurs modernes) et des polyfills (pour ajouter des fonctions qui peuvent manquer). Et ils veilleront à ce que le code fonctionne.
 
+<<<<<<< HEAD
 Par exemple, plus tard, lorsque vous serez familiarisé avec JavaScript, vous pourrez configurer un système de création de code basé sur [webpack](http://webpack.github.io/) avec le plugin [babel-loader](https://github.com/babel/babel-loader).
+=======
+For example, later when you're familiar with JavaScript, you can setup a code build system based on [webpack](https://webpack.js.org/) with [babel-loader](https://github.com/babel/babel-loader) plugin.
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 De bonnes ressources qui montrent l'état actuel de la prise en charge de diverses fonctionnalités :
 - <https://kangax.github.io/compat-table/es6/> - pour du pur JavaScript.

1-js/04-object-basics/07-optional-chaining/article.md

@@ -37,7 +37,11 @@ Dans de nombreux cas pratiques, nous préférerions obtenir `undefined` au lieu
 let html = document.querySelector('.elem').innerHTML; // error if it's null
 ```
 
+<<<<<<< HEAD
 Encore une fois, si l'élément n'existe pas, nous obtiendrons une erreur lors de l'accès à `.innerHTML` de` null`. Et dans certains cas, lorsque l'absence de l'élément est normale, nous aimerions éviter l'erreur et accepter simplement `html = null` comme résultat.
+=======
+Once again, if the element doesn't exist, we'll get an error accessing `.innerHTML` property of `null`. And in some cases, when the absence of the element is normal, we'd like to avoid the error and just accept `html = null` as the result.
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 Comment peut-on le faire ?
 
@@ -49,11 +53,27 @@ let user = {};
 alert(user.address ? user.address.street : undefined);
 ```
 
+<<<<<<< HEAD
 Cela fonctionne, il n'y a pas d'erreur ... Mais c'est assez inélégant. Comme vous pouvez le voir, `"user.address"` apparaît deux fois dans le code. Pour des propriétés plus profondément imbriquées, cela devient un problème car plus de répétitions sont nécessaires.
 
 Par exemple. essayons d'obtenir `user.address.street.name`.
 
 Nous devons vérifier à la fois `user.address` et `user.address.street` :
+=======
+It works, there's no error... But it's quite inelegant. As you can see, the `"user.address"` appears twice in the code.
+
+Here's how the same would look for `document.querySelector`:
+
+```js run
+let html = document.querySelector('.elem') ? document.querySelector('.elem').innerHTML : null;
+```
+
+We can see that the element search `document.querySelector('.elem')` is actually called twice here. Not good.
+
+For more deeply nested properties, it becomes even uglier, as more repetitions are required.
+
+E.g. let's get `user.address.street.name` in a similar fashion.
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 ```js
 let user = {}; // l'utilisateur n'a pas d'adresse
@@ -63,7 +83,11 @@ alert(user.address ? user.address.street ? user.address.street.name : null : nul
 
 C'est juste horrible, on peut même avoir des problèmes pour comprendre un tel code.
 
+<<<<<<< HEAD
 Ne vous en souciez même pas, car il existe une meilleure façon de l'écrire, en utilisant l'opérateur `&&` :
+=======
+There's a little better way to write it, using the `&&` operator:
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 ```js run
 let user = {}; // l'utilisateur n'a pas d'adresse
@@ -98,7 +122,17 @@ alert( user?.address?.street ); // undefined (no error)
 
 Le code est court et propre, il n'y a aucune duplication.
 
+<<<<<<< HEAD
 La lecture de l'adresse avec `user?.address` fonctionne même si l'objet `user` n'existe pas :
+=======
+Here's an example with `document.querySelector`:
+
+```js run
+let html = document.querySelector('.elem')?.innerHTML; // will be null, if there's no element
+```
+
+Reading the address with `user?.address` works even if `user` object doesn't exist:
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 ```js run
 let user = null;
@@ -114,8 +148,14 @@ Par exemple. dans `user?.address.street.name` le `?.` permet à `user` d'être e
 ```warn header="N'abusez pas du chaînage optionnel"
 Nous ne devrions utiliser `?.` que là où il est normal que quelque chose n'existe pas.
 
+<<<<<<< HEAD
 Par exemple, si selon notre logique de codage, l'objet `user` doit exister, mais que `address` est facultatif, alors nous devrions écrire `user.address?.street`, mais pas `user?.address?.street`.
 
+=======
+For example, if according to our code logic `user` object must exist, but `address` is optional, then we should write `user.address?.street`, but not `user?.address?.street`.
+
+Then, if `user` happens to be undefined, we'll see a programming error about it and fix it. Otherwise, if we overuse `?.`, coding errors can be silenced where not appropriate, and become more difficult to debug.
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 ```
 
 ````warn header="La variable avant `?.` doit être déclarée"
@@ -133,14 +173,22 @@ La variable doit être déclarée (par exemple `let/const/var user` ou en tant q
 Comme il a été dit précédemment, le `?.` arrête immédiatement ("court-circuite") l'évaluation si la partie gauche n'existe pas.
 
 
+<<<<<<< HEAD
 Donc, s'il y a d'autres appels de fonction ou effets secondaires, ils ne se produisent pas :
+=======
+So, if there are any further function calls or operations to the right of `?.`, they won't be made.
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 Par exemple :
 
 ```js run
 let user = null;
 let x = 0;
 
+<<<<<<< HEAD
+=======
+user?.sayHi(x++); // no "user", so the execution doesn't reach sayHi call and x++
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 user?.sayHi(x++); // pas de "sayHi", donc l'exécution n'atteint pas x++
 
@@ -171,10 +219,14 @@ userAdmin.admin?.(); // I am admin
 */!*
 
 *!*
-userGuest.admin?.(); // nothing (no such method)
+userGuest.admin?.(); // nothing happens (no such method)
 */!*
 ```
 
+<<<<<<< HEAD
+=======
+Here, in both lines we first use the dot (`userAdmin.admin`) to get `admin` property, because we assume that the `user` object exists, so it's safe read from it.
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 Ici, dans les deux lignes, nous utilisons d'abord le point (`userAdmin.admin`) pour obtenir la propriété `admin`, car l'objet utilisateur doit exister, donc il peut être lu en toute sécurité.
 
@@ -190,7 +242,7 @@ let user1 = {
   firstName: "John"
 };
 
-let user2 = null; 
+let user2 = null;
 
 alert( user1?.[key] ); // John
 alert( user2?.[key] ); // undefined
@@ -212,14 +264,23 @@ For example:
 
 let user = null;
 
+<<<<<<< HEAD
 user?.name = "John"; // Erreur, ne fonctionne pas
 // car il évalue à undefined = "John"
+=======
+user?.name = "John"; // Error, doesn't work
+// because it evaluates to: undefined = "John"
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 ```
 Ce n'est tout simplement pas si intelligent.
 
+<<<<<<< HEAD
 ## Résumé
 
 Le chaînage optionnel '?.' A trois formes :
+=======
+````
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f
 
 1. `obj?.prop` -- retourne `obj.prop` si `obj` existe, sinon `undefined`.
 2. `obj?.[prop]` -- retourne `obj[prop]` si `obj` existe, sinon `undefined`.
@@ -231,4 +292,8 @@ Comme nous pouvons le voir, tous sont simples et simples à utiliser. Le `?.` v
 Une chaîne de `?.` permet d'accéder en toute sécurité aux propriétés imbriquées.
 
 
+<<<<<<< HEAD
 Néanmoins, nous devons appliquer `?.` avec soin, uniquement s'il est acceptable que la partie gauche n'existe pas. Pour ne pas nous cacher les erreurs de programmation, si elles se produisent.
+=======
+Still, we should apply `?.` carefully, only where it's acceptable, according to our code logic, that the left part doesn't exist. So that it won't hide programming errors from us, if they occur.
+>>>>>>> 45934debd9bb31376ea5da129e266df5b43e545f