feat: update translation

Author: leviding

1-js/09-classes/03-static-properties-methods/article.md

@@ -1,9 +1,9 @@
 
 # 静态属性和静态方法
 
-我们可以把一个方法赋值给类的函数本身，而不是赋给它的 `"prototype"`。这样的方法被称为 **静态的（static）**。
+我们可以把一个方法作为一个整体赋值给类。这样的方法被称为 **静态的（static）**。
 
-在一个类中，它们以 `static` 关键字开头，如下所示：
+在一个类的声明中，它们以 `static` 关键字开头，如下所示：
 
 ```js run
 class User {
@@ -31,9 +31,11 @@ User.staticMethod(); // true
 
 在 `User.staticMethod()` 调用中的 `this` 的值是类构造器 `User` 自身（“点符号前面的对象”规则）。
 
-通常，静态方法用于实现属于该类但不属于该类任何特定对象的函数。
+通常，静态方法用于实现属于整个类，但不属于该类任何特定对象的函数。
 
-例如，我们有对象 `Article`，并且需要一个方法来比较它们。一个自然的解决方案就是添加 `Article.compare` 方法，像下面这样：
+例如，我们有对象 `Article`，并且需要一个方法来比较它们。
+
+通常的解决方案就是添加 `Article.compare` 静态方法：
 
 ```js run
 class Article {
@@ -63,17 +65,19 @@ articles.sort(Article.compare);
 alert( articles[0].title ); // CSS
 ```
 
-这里 `Article.compare` 代表“上面的”文章，意思是比较它们。它不是文章的方法，而是整个 class 的方法。
+这里 `Article.compare` 方法代表“上面的”文章，意思是比较它们。它不是文章的方法，而是整个 class 的方法。
+
+另一个例子是所谓的“工厂”方法。
 
-另一个例子是所谓的“工厂”方法。想象一下，我们需要通过几种方法来创建一个文章：
+比如说，我们需要通过多种方式来创建一篇文章：
 
 1. 通过用给定的参数来创建（`title`，`date` 等）。
 2. 使用今天的日期来创建一个空的文章。
 3. ……其它方法。
 
 第一种方法我们可以通过 constructor 来实现。对于第二种方式，我们可以创建类的一个静态方法来实现。
 
-就像这里的 `Article.createTodays()`：
+例如这里的 `Article.createTodays()`：
 
 ```js run
 class Article {
@@ -101,7 +105,7 @@ alert( article.title ); // Today's digest
 
 ```js
 // 假定 Article 是一个用来管理文章的特殊类
-// 静态方法用于移除文章：
+// 通过 id 来移除文章的静态方法：
 Article.remove({id: 12345});
 ```
 

1-js/11-async/05-promise-api/article.md

@@ -13,10 +13,10 @@
 语法：
 
 ```js
-let promise = Promise.all([...promises...]);
+let promise = Promise.all(iterable);
 ```
 
-`Promise.all` 接受一个 promise 数组作为参数（从技术上讲，它可以是任何可迭代对象，但通常是一个数组）并返回一个新的 promise。
+`Promise.all` 接受一个可迭代对象（通常是一个数组项为 promise 的数组），并返回一个新的 promise。
 
 当所有给定的 promise 都 resolve 时，新的 promise 才会 resolve，并且其结果数组将成为新 promise 的结果。
 
@@ -248,7 +248,7 @@ Promise.any([
 ]).catch(error => {
   console.log(error.constructor.name); // AggregateError
   console.log(error.errors[0]); // Error: Ouch!
-  console.log(error.errors[1]); // Error: Error
+  console.log(error.errors[1]); // Error: Error!
 });
 ```
 

1-js/11-async/08-async-await/01-rewrite-async/solution.md

@@ -13,7 +13,7 @@ async function loadJson(url) { // (1)
   throw new Error(response.status);
 }
 
-loadJson('no-such-user.json')
+loadJson('https://javascript.info/no-such-user.json')
   .catch(alert); // Error: 404 (4)
 ```
 

1-js/11-async/08-async-await/01-rewrite-async/task.md

@@ -15,6 +15,6 @@ function loadJson(url) {
     });
 }
 
-loadJson('no-such-user.json')
+loadJson('https://javascript.info/no-such-user.json')
   .catch(alert); // Error: 404
 ```

1-js/13-modules/02-import-export/article.md

@@ -93,7 +93,7 @@ say.sayBye('John');
 
 这里有几个原因。
 
-1. 现代的构建工具（[webpack](http://webpack.github.io) 和其他工具）将模块打包到一起并对其进行优化，以加快加载速度并删除未使用的代码。
+1. 现代的构建工具（[webpack](https://webpack.js.org/) 和其他工具）将模块打包到一起并对其进行优化，以加快加载速度并删除未使用的代码。
 
     比如说，我们向我们的项目里添加一个第三方库 `say.js`，它具有许多函数：
     ```js

1-js/99-js-misc/04-reference-type/article.md

@@ -59,7 +59,7 @@ user.hi();
 let user = {
   name: "John",
   hi() { alert(this.name); }
-}
+};
 
 *!*
 // 把获取方法和调用方法拆成两行

2-ui/1-document/04-searching-elements-dom/article.md

@@ -154,7 +154,7 @@ CSS 选择器的伪类，例如 `:hover` 和 `:active` 也都是被支持的。
 <div class="contents">
   <ul class="book">
     <li class="chapter">Chapter 1</li>
-    <li class="chapter">Chapter 1</li>
+    <li class="chapter">Chapter 2</li>
   </ul>
 </div>
 

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

@@ -17,8 +17,8 @@ JavaScript 中有许多属性可让我们读取有关元素宽度、高度和其
     width: 300px;
     height: 200px;
     border: 25px solid #E8C48F;
-    padding: 20px;              
-    overflow: auto;             
+    padding: 20px;
+    overflow: auto;
   }
 </style>
 ```

2-ui/1-document/09-size-and-scroll/metric-client-left-top-rtl.svg

@@ -30,7 +30,7 @@ ball.onmousedown = function(event) {
 
   // 将其从当前父元素中直接移动到 body 中
   // 以使其定位是相对于 body 的
-  document.body.append(ball);  
+  document.body.append(ball);
 
   // 现在球的中心在 (pageX, pageY) 坐标上
   function moveAt(pageX, pageY) {
@@ -219,7 +219,7 @@ In action (inside `<iframe>`):
 
 那么，该怎么办？
 
-有一个叫做 `document.elementFromPoint(clientX, clientY)` 的方法。它会返回在给定的窗口相对坐标处的嵌套的最深的元素（如果给定的坐标在窗口外，则返回 `null`）。
+有一个叫做 `document.elementFromPoint(clientX, clientY)` 的方法。它会返回在给定的窗口相对坐标处的嵌套的最深的元素（如果给定的坐标在窗口外，则返回 `null`）。如果同一坐标上有多个重叠的元素，则返回最上面的元素。
 
 我们可以在我们的任何鼠标事件处理程序中使用它，以检测鼠标指针下的潜在的 "droppable" 的元素，就像这样：
 

2-ui/1-document/09-size-and-scroll/metric-client-left-top.svg

@@ -155,7 +155,7 @@ alert(ageElems[0]); // [object HTMLInputElement]
 
 ### input 和 textarea
 
-我们可以通过 `input.value`（字符串）或 `input.checked`（布尔值）来访问复选框（checkbox）中的它们的 `value`。
+我们可以通过 `input.value`（字符串）或 `input.checked`（布尔值）来访问复选框（checkbox）和单选按钮（radio button）中的 `value`。
 
 像这样：
 

2-ui/3-event-details/4-mouse-drag-and-drop/article.md

@@ -0,0 +1,50 @@
+The console output is: 1 7 3 5 2 6 4.
+
+The task is quite simple, we just need to know how microtask and macrotask queues work.
+
+Let's see what's going on, step by step.
+
+```js
+console.log(1);
+// The first line executes immediately, it outputs `1`.
+// Macrotask and microtask queues are empty, as of now.
+
+setTimeout(() => console.log(2));
+// `setTimeout` appends the callback to the macrotask queue.
+// - macrotask queue content:
+//   `console.log(2)`
+
+Promise.resolve().then(() => console.log(3));
+// The callback is appended to the microtask queue.
+// - microtask queue content:
+//   `console.log(3)`
+
+Promise.resolve().then(() => setTimeout(() => console.log(4)));
+// The callback with `setTimeout(...4)` is appended to microtasks
+// - microtask queue content:
+//   `console.log(3); setTimeout(...4)`
+
+Promise.resolve().then(() => console.log(5));
+// The callback is appended to the microtask queue
+// - microtask queue content:
+//   `console.log(3); setTimeout(...4); console.log(5)`
+
+setTimeout(() => console.log(6));
+// `setTimeout` appends the callback to macrotasks
+// - macrotask queue content:
+//   `console.log(2); console.log(6)`
+
+console.log(7);
+// Outputs 7 immediately.
+```
+
+To summarize,
+
+1. Numbers `1` и `7` show up immediately, because simple `console.log` calls don't use any queues.
+2. Then, after the main code flow is finished, the microtask queue runs.
+    - It has commands: `console.log(3); setTimeout(...4); console.log(5)`.
+    - Numbers `3` и `5` show up, while `setTimeout(() => console.log(4))` adds the `console.log(4)` call to the end of the macrotask queue.
+    - The macrotask queue is now: `console.log(2); console.log(6); console.log(4)`.
+3. After the microtask queue becomes empty, the macrotask queue executes. It outputs `2`, `6`, `4`.
+
+Finally, we have the output: `1 7 3 5 2 6 4`.

2-ui/4-forms-controls/1-form-elements/article.md

@@ -0,0 +1,21 @@
+importance: 5
+
+---
+
+# 下方这段代码的输出是什么？
+
+```js
+console.log(1);
+
+setTimeout(() => console.log(2));
+
+Promise.resolve().then(() => console.log(3));
+
+Promise.resolve().then(() => setTimeout(() => console.log(4)));
+
+Promise.resolve().then(() => console.log(5));
+
+setTimeout(() => console.log(6));
+
+console.log(7);
+```

2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/solution.md

@@ -260,7 +260,7 @@ window.onblur = () => window.focus();
 - 当我们打开一个弹窗时，在它上面执行 `newWindow.focus()` 是个好主意。以防万一，对于某些操作系统/浏览器组合（combination），它可以确保用户现在位于新窗口中。
 - 如果我们想要跟踪访问者何时在实际使用我们的 Web 应用程序，我们可以跟踪 `window.onfocus/onblur`。这使我们可以暂停/恢复页面活动和动画等。但是请注意，`blur` 事件意味着访问者从窗口切换了出来，但他们仍然可以观察到它。窗口处在背景中，但可能仍然是可见的。
 
-## 总结   
+## 总结
 
 弹窗很少使用，因为有其他选择：在页面内或在 iframe 中加载和显示信息。
 

2-ui/99-ui-misc/03-event-loop/2-micro-macro-queue/task.md

@@ -2,10 +2,10 @@ function concat(arrays) {
   // sum of individual array lengths
   let totalLength = arrays.reduce((acc, value) => acc + value.length, 0);
 
-  if (!arrays.length) return null;
-
   let result = new Uint8Array(totalLength);
 
+  if (!arrays.length) return result;
+
   // for each array - copy it over result
   // next array is copied right after the previous one
   let length = 0;