Merge pull request #74 from javascript-tutorial/sync-d35baee3

Sync with upstream @ d35baee

Author: 3imed-jaberi

1-js/02-first-steps/04-variables/article.md

@@ -83,9 +83,8 @@ let user = 'John'
 
 تقنيا, كل هذه الطرق تؤدي لنفس الشئ. لذلك, انها مسألة ذوق وجمال شخصي.
 
-
 ````smart header="`var` بدلا من `let`"
-في الاصدارات الاقدم, قد تجد ايضا كلمة اخري: `var` بدلا من `let`
+في الاصدارات الاقدم, قد تجد ايضا كلمة اخري: `var` بدلا من `let`:
 
 ```js
 *!*var*/!* message = 'Hello';
@@ -136,6 +135,20 @@ alert(hello); // Hello world!
 alert(message); // Hello world!
 ```
 
+````warn header="Declaring twice triggers an error"
+A variable should be declared only once.
+
+A repeated declaration of the same variable is an error:
+
+```js run
+let message = "This";
+
+// repeated 'let' leads to an error
+let message = "That"; // SyntaxError: 'message' has already been declared
+```
+So, we should declare a variable once and then refer to it without `let`.
+````
+
 ```smart header="Functional languages"
 من المثير للاهتمام ملاحظة وجود [وظيفي](https://en.wikipedia.org/wiki/Functional_programming) لغات برمجه, مثل [Scala](http://www.scala-lang.org/) او [Erlang](http://www.erlang.org/) تمنع تغيير قيم المتغير.
 
@@ -191,7 +204,8 @@ let имя = '...';
 let 我 = '...';
 ```
 
-تقنياً, لا يوجد خطأ هنا, مثل هذه الاسماء مسموح بها, ولكن هناك تقاليد عالميه لأستخدام اللغه الانجليزيه في أسماء المتغيرات. حتي لو كنا نكتب نصاً صغيراً, قد يكون لها حياة طويله في المستقبل. الناس من مختلف البلاد ربما يحتاجوا لقرأءتها في بنفس الكتابة.
+تقنياً, لا يوجد خطأ هنا, مثل هذه الاسماء مسموح بها, ولكن هناك تقاليد عالميه لأستخدام اللغه الانجليزيه في أسماء المتغيرات. حتي لو كنا نكتب نصاً صغيراً, قد يكون لها حياة طويله في المستقبل. الناس من مختلف البلاد ربما يحتاجوا لقرأءتها لبعض الوقت.
+
 ````
 
 ````warn header="الأسماء المحجوزه"

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

@@ -285,7 +285,7 @@ Of course, a team can always write their own style guide, but usually there's no
 
 Some popular choices:
 
-- [Google JavaScript Style Guide](https://google.github.io/styleguide/javascriptguide.xml)
+- [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html)
 - [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
 - [Idiomatic.JS](https://github.com/rwaldron/idiomatic.js)
 - [StandardJS](https://standardjs.com/)

1-js/03-code-quality/05-testing-mocha/beforeafter.view/test.js

@@ -1,5 +1,11 @@
 describe("test", function() {
+  
+   // Mocha usually waits for the tests for 2 seconds before considering them wrong
+  
+  this.timeout(200000); // With this code we increase this - in this case to 200,000 milliseconds
 
+  // This is because of the "alert" function, because if you delay pressing the "OK" button the tests will not pass!
+  
   before(() => alert("Testing started – before all tests"));
   after(() => alert("Testing finished – after all tests"));
 

1-js/06-advanced-functions/02-rest-parameters-spread/article.md

@@ -227,7 +227,7 @@ So, for the task of turning something into an array, `Array.from` tends to be mo
 
 ## Get a new copy of an array/object
 
-Remember when we talked about `Object.assign()` [in the past](https://javascript.info/object#cloning-and-merging-object-assign)?
+Remember when we talked about `Object.assign()` [in the past](info:object-copy#cloning-and-merging-object-assign)?
 
 It is possible to do the same thing with the spread syntax.
 

1-js/06-advanced-functions/04-var/article.md

@@ -13,27 +13,18 @@ In the very first chapter about [variables](info:variables), we mentioned three
 2. `const`
 3. `var`
 
-`let` and `const` behave exactly the same way in terms of Lexical Environments.
-
-But `var` is a very different beast, that originates from very old times. It's generally not used in modern scripts, but still lurks in the old ones.
-
-If you don't plan on meeting such scripts you may even skip this chapter or postpone it, but then there's a chance that it bites you later.
-
-From the first sight, `var` behaves similar to `let`. That is, declares a variable:
+The `var` declaration is similar to `let`. Most of the time we can replace `let` by `var` or vice-versa and expect things to work:
 
 ```js run
-function sayHi() {
-  var phrase = "Hello"; // local variable, "var" instead of "let"
-
-  alert(phrase); // Hello
-}
+var message = "Hi";
+alert(message); // Hi
+```
 
-sayHi();
+But internally `var` is a very different beast, that originates from very old times. It's generally not used in modern scripts, but still lurks in the old ones.
 
-alert(phrase); // Error, phrase is not defined
-```
+If you don't plan on meeting such scripts you may even skip this chapter or postpone it.
 
-...But here are the differences.
+On the other hand, it's important to understand differences when migrating old scripts from `var` to `let`, to avoid odd errors.
 
 ## "var" has no block scope
 
@@ -94,7 +85,27 @@ alert(phrase); // Error: phrase is not defined (Check the Developer Console)
 
 As we can see, `var` pierces through `if`, `for` or other code blocks. That's because a long time ago in JavaScript blocks had no Lexical Environments. And `var` is a remnant of that.
 
-## "var" declarations are processed at the function start
+## "var" tolerates redeclarations
+
+If we declare the same variable with `let` twice in the same scope, that's an error:
+
+```js run
+let user;
+let user; // SyntaxError: 'user' has already been declared
+```
+
+With `var`, we can redeclare a variable any number of times. If we use `var` with an already-declared variable, it's just ignored:
+
+```js run
+var user = "Pete";
+
+var user = "John"; // this "var" does nothing (already declared)
+// ...it doesn't trigger an error
+
+alert(user); // John
+```
+
+## "var" variables can be declared below their use
 
 `var` declarations are processed when the function starts (or script starts for globals).
 

2-ui/1-document/09-size-and-scroll/article.md

@@ -150,7 +150,7 @@ function isHidden(elem) {
 
 تتضمن عرض المحتوى مع الحشو ، لكن بدون شريط التمرير:
 
-! [] (metric-client-width-height.svg)
+![](metric-client-width-height.svg)
 
 في الصورة أعلاه ، لنفكر أولاً في "clientHeight".
 
@@ -169,7 +169,7 @@ function isHidden(elem) {
 
 هذه الخصائص مثل `clientWidth / clientHeight` ، ولكنها تشمل أيضًا الأجزاء التي تم تمريرها (المخفية):
 
-! [] (metric-roll-width-height.svg)
+![](metric-roll-width-height.svg)
 
 في الصورة أعلاه:
 
@@ -199,22 +199,22 @@ element.style.height = `${element.scrollHeight}px`;
 
 في الصورة أدناه ، يمكننا رؤية "التمرير" و "التمرير العلوي" للكتلة ذات التمرير العمودي.
 
-! [] (metric-تمرير-top.svg)
+![](metric-scroll-top.svg)
 
 وبعبارة أخرى ، فإن "rollTop" هو "مقدار التمرير".
 
-`` `` smart header = "يمكن تعديل" التمرير لليسار / التمرير العلوي "
+````smart header = "يمكن تعديل" التمرير لليسار / التمرير العلوي "
 معظم الخصائص الهندسية هنا للقراءة فقط ، ولكن يمكن تغيير `التمرير لليسار / التمرير العلوي` ، وسوف يقوم المتصفح بتمرير العنصر.
 
-`` عبر الإنترنت
+```online
 إذا قمت بالنقر فوق العنصر أدناه ، فسيتم تنفيذ الرمز `elem.scrollTop + = 10`. هذا يجعل محتوى العنصر بالتمرير `10px` للأسفل.
 
 
 <div onclick="this.scrollTop+=10" style="cursor:pointer;border:1px solid black;width:100px;height:80px;overflow:auto">Click<br>Me<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9</div>
 ```
 
-يؤدي تعيين "التمرير" إلى "0" أو "إنفينيتي" إلى جعل العنصر ينتقل إلى الأعلى / الأسفل على التوالي.
-`` ``
+يؤدي تعيين "scrollTop" إلى "0" أو "إنفينيتي" إلى جعل العنصر ينتقل إلى الأعلى/الأسفل على التوالي.
+````
 
 ## لا تأخذ العرض / الارتفاع من CSS
 
@@ -275,4 +275,4 @@ alert( getComputedStyle(elem).width ); // show CSS width for elem
 - "التمرير / التمرير" - عرض / ارتفاع المحتوى ، مثل "clientWidth / clientHeight" ، ولكن يشمل أيضًا الجزء غير المرئي من العنصر.
 - `التمرير لليسار / التمرير العلوي` - عرض / ارتفاع الجزء العلوي الذي تم تمريره للخارج من العنصر ، بدءًا من الزاوية العلوية اليسرى.
 
-جميع الخصائص للقراءة فقط باستثناء `التمرير الأيسر / التمرير العلوي` والتي تجعل المتصفح يقوم بتمرير العنصر إذا تم تغييره.
+جميع الخصائص للقراءة فقط باستثناء `التمرير الأيسر / التمرير العلوي` والتي تجعل المتصفح يقوم بتمرير العنصر إذا تم تغييره.

2-ui/2-events/02-bubbling-and-capturing/article.md

@@ -181,7 +181,7 @@ The code sets click handlers on *every* element in the document to see which one
 If you click on `<p>`, then the sequence is:
 
 1. `HTML` -> `BODY` -> `FORM` -> `DIV` (capturing phase, the first listener):
-2. `P` (target phrase, triggers two times, as we've set two listeners: capturing and bubbling)
+2. `P` (target phase, triggers two times, as we've set two listeners: capturing and bubbling)
 3. `DIV` -> `FORM` -> `BODY` -> `HTML` (bubbling phase, the second listener).
 
 There's a property `event.eventPhase` that tells us the number of the phase on which the event was caught. But it's rarely used, because we usually know it in the handler.

2-ui/3-event-details/4-mouse-drag-and-drop/ball2.view/index.html

@@ -13,7 +13,7 @@
 
 
   <script>
-    ball.onmousedown = function(event) {s
+    ball.onmousedown = function(event) {
       ball.style.position = 'absolute';
       ball.style.zIndex = 1000;
       document.body.appendChild(ball);