up

10-regular-expressions-javascript/14-regexp-lookahead/article.md

@@ -0,0 +1,3 @@
+# Lookahead (in progress)
+
+The article is under development, will be here when it's ready.

2-ui/2-events/5-event-delegation/3-sort-table/solution.view/index.html

@@ -87,7 +87,7 @@
           break;
       }
 
-      // сортировать
+      // sort
       rowsArray.sort(compare);
 
       tbody.append(...rowsArray);

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html

@@ -78,11 +78,12 @@
     }
 
     document.onmouseout = function() {
-      // возможно такое, что mouseout сработал, а мы все еще внутри элемента (всплытие)
-      // но в этом случае сразу же будет и mouseover,
-      // то есть подсказка будет уничтожена и тут же показана заново
+      // it is possible that mouseout triggered, but we're still inside the element (cause of bubbling)
+      // but in this case we'll have an immediate mouseover,
+      // so the tooltip will be destroyed and shown again
       //
-      // это лишние расходы, их можно избежать дополнительными проверками
+      // that's an overhead, but here it's not visible
+      // can be fixed with additional checks
       if (tooltip) {
         tooltip.remove();
         tooltip = false;

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.view/hoverIntent.js

@@ -58,7 +58,7 @@ class HoverIntent {
       this.elem.removeEventListener('mousemove', this.onMouseMove);
       clearInterval(this.checkSpeedInterval);
       if (this.isHover) {
-        // если была остановка над элементом
+        // if there was a stop over the element
         this.out.call(this.elem, event);
         this.isHover = false;
       }

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md

@@ -171,16 +171,17 @@ Here's the full example with all details:
 
 [codetabs height=380 src="mouseenter-mouseleave-delegation-2"]
 
-Try to move the cursor in and out of table cells and inside them. Fast or slow -- doesn't better. Only `<td>` as a whole is highlighted unlike the example before. 
+Try to move the cursor in and out of table cells and inside them. Fast or slow -- doesn't better. Only `<td>` as a whole is highlighted unlike the example before.
 ```
 
 
-## Итого
+## Summary
 
-У `mouseover, mousemove, mouseout` есть следующие особенности:
+We covered events `mouseover`, `mouseout`, `mousemove`, `mouseenter` and `mouseleave`.
 
-- При быстром движении мыши события `mouseover, mousemove, mouseout` могут пропускать промежуточные элементы.
-- События `mouseover` и `mouseout` -- единственные, у которых есть вторая цель: `relatedTarget` (`toElement/fromElement` в IE).
-- События `mouseover/mouseout` подразумевают, что курсор находится над одним, самым глубоким элементом. Они срабатывают при переходе с родительского элемента на дочерний.
+Things that are good to note:
 
-События `mouseenter/mouseleave` не всплывают и не учитывают переходы внутри элемента.
+- A fast mouse move can make `mouseover, mousemove, mouseout` to skip intermediate elements.
+- Events `mouseover/out` and `mouseenter/leave` have an additional target: `relatedTarget`. That's the element that we are coming from/to, complementary to `target`.
+- Events `mouseover/out` trigger even when we go from the parent element to a child element. They assume that the mouse can be only over one element at one time -- the deepest one.
+- Events `mouseenter/leave` do not bubble and do not trigger when the mouse goes to a child element. They only track whether the mouse comes inside and outside the element as a whole.

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/index.html

@@ -70,5 +70,4 @@
   <script src="script.js"></script>
 
 </body>
-
-</html>
+</html>

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseenter-mouseleave-delegation-2.view/script.js

@@ -1,46 +1,38 @@
-// элемент TD, внутри которого сейчас курсор
-var currentElem = null;
+// <td> under the mouse right now (if any)
+let currentElem = null;
 
 table.onmouseover = function(event) {
   if (currentElem) {
-    // перед тем, как зайти в новый элемент, курсор всегда выходит из предыдущего
-    // 
-    // если мы еще не вышли, значит это переход внутри элемента, отфильтруем его
+    // before entering a new element, the mouse always leaves the previous one
+    // if we didn't leave <td> yet, then we're still inside it, so can ignore the event
     return;
   }
 
-  // посмотрим, куда пришёл курсор
-  var target = event.target;
+  let target = event.target.closest('td');
+  if (!target || !table.contains(target)) return;
 
-  // уж не на TD ли?
-  while (target != this) {
-    if (target.tagName == 'TD') break;
-    target = target.parentNode;
-  }
-  if (target == this) return;
-
-  // да, элемент перешёл внутрь TD!
+  // yeah we're inside <td> now
   currentElem = target;
   target.style.background = 'pink';
 };
 
 
 table.onmouseout = function(event) {
-  // если курсор и так снаружи - игнорируем это событие
+  // if we're outside of any <td> now, then ignore the event
   if (!currentElem) return;
 
-  // произошёл уход с элемента - проверим, куда, может быть на потомка?
-  var relatedTarget = event.relatedTarget;
-  if (relatedTarget) { // может быть relatedTarget = null
+  // we're leaving the element -- where to? Maybe to a child element?
+  let relatedTarget = event.relatedTarget;
+  if (relatedTarget) { // possible: relatedTarget = null
     while (relatedTarget) {
-      // идём по цепочке родителей и проверяем, 
-      // если переход внутрь currentElem - игнорируем это событие
+      // go up the parent chain and check -- if we're still inside currentElem
+      // then that's an internal transition -- ignore it
       if (relatedTarget == currentElem) return;
       relatedTarget = relatedTarget.parentNode;
     }
   }
 
-  // произошло событие mouseout, курсор ушёл
+  // we left the element. really.
   currentElem.style.background = '';
   currentElem = null;
-};
+};

2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseleave-table.view/index.html

@@ -69,11 +69,11 @@
 
   <textarea id="text"></textarea>
 
-  <input type="button" onclick="text.value=''" value="Очистить">
+  <input type="button" onclick="text.value=''" value="Clear">
 
 
   <script src="script.js"></script>
 
 </body>
 
-</html>
+</html>

2-ui/3-event-details/5-keyboard-events/head.html

@@ -1,15 +0,0 @@
-<script>
-function getChar(event) {
-  if (event.which == null) { // IE
-    if (event.keyCode < 32) return null; // спец. символ
-    return String.fromCharCode(event.keyCode)
-  }
-
-  if (event.which != 0 && event.charCode != 0) { // все кроме IE
-    if (event.which < 32) return null; // спец. символ
-    return String.fromCharCode(event.which); // остальные
-  }
-
-  return null; // спец. символ
-}
-</script>

2-ui/3-event-details/index.md

@@ -1,5 +1,3 @@
-# События в деталях
+# Events in details
 
-В этом разделе мы разбираем конкретные события и особенности работы с ними.
-
-Вы можете читать его в любом порядке или кратко просмотреть его и вернуться к конкретным событиям, когда они понадобятся.
+Here we cover most important events and details of working with them.

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

@@ -246,7 +246,7 @@ For instance:
 
 ```js
 let option = new Option("Text", "value");
-// creates <option value="value">Текст</option>
+// creates <option value="value">Text</option>
 ```
 
 The same element selected:

2-ui/4-forms-controls/2-focus-blur/article.md

@@ -42,7 +42,8 @@ Your email please: <input type="email" id="input">
 };
 
 *!*input.onfocus*/!* = function() {
-  if (this.classList.contains('invalid')) { // сбросить состояние "ошибка", если оно есть
+  if (this.classList.contains('invalid')) {
+    // remove the "error" indication, because the user wants to re-enter something
     this.classList.remove('invalid');
     error.innerHTML = "";
   }

2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/task.md

@@ -18,7 +18,7 @@ Requirements:
 - When the form is shown, the focus should be inside the `<input>` for the user.
 - Keys `key:Tab`/`key:Shift+Tab` should shift the focus between form fields, don't allow it to leave for other page elements.
 
-Пример использования:
+Usage example:
 
 ```js
 showPrompt("Enter something<br>...smart :)", function(value) {