Merge pull request #1 from javascript-tutorial/master

Update master
2019-11-30 14:31:54 -06:00 · 2019-11-30 14:31:54 -06:00 · d0b0a4aba4
commit d0b0a4aba4
parent 09f2aa667c 438e66d952
98 changed files with 164 additions and 156 deletions
--- a/1-js/01-getting-started/4-devtools/article.md
+++ b/1-js/01-getting-started/4-devtools/article.md
@ -29,10 +29,15 @@ The exact look of developer tools depends on your version of Chrome. It changes
 - Here we can see the red-colored error message. In this case, the script contains an unknown "lalala" command.
 - On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occurred.

-Below the error message, there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands. Press `key:Enter` to run them (`key:Shift+Enter` to input multi-line commands).
+Below the error message, there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands. Press `key:Enter` to run them.

 Now we can see errors, and that's enough for a start. We'll come back to developer tools later and cover debugging more in-depth in the chapter <info:debugging-chrome>.

+```smart header="Multi-line input"
+Usually, when we put a line of code into the console, and then press `key:Enter`, it executes.
+
+To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code.
+```

 ## Firefox, Edge, and others

@ -50,12 +55,6 @@ Open Preferences and go to the "Advanced" pane. There's a checkbox at the bottom

 Now `key:Cmd+Opt+C` can toggle the console. Also, note that the new top menu item named "Develop" has appeared. It has many commands and options.

-```smart header="Multi-line input"
-Usually, when we put a line of code into the console, and then press `key:Enter`, it executes.
-
-To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code.
-```
-
 ## Summary

 - Developer tools allow us to see errors, run commands, examine variables, and much more.
--- a/1-js/02-first-steps/05-types/article.md
+++ b/1-js/02-first-steps/05-types/article.md
@ -10,7 +10,7 @@ message = 123456;

 Programming languages that allow such things are called "dynamically typed", meaning that there are data types, but variables are not bound to any of them.

-There are seven basic data types in JavaScript. Here, we'll cover them in general and in the next chapters we'll talk about each of them in detail.
+There are eight basic data types in JavaScript. Here, we'll cover them in general and in the next chapters we'll talk about each of them in detail.

 ## A number

@ -180,6 +180,31 @@ All other types are called "primitive" because their values can contain only a s

 The `symbol` type is used to create unique identifiers for objects. We mention it here for completeness, but we'll study it after objects.

+## BigInt
+
+In JavaScript, the Number type cannot represent integer values larger than 2<sup>53</sup>-1. This limitation has forced many of us to use inefficient workarounds. BigInt is a new data type intended to fix just that. A BigInt is created by appending n to the end of an integer literal — 10n — or by calling the function BigInt().
+
+```js run
+const theBiggestInt = 9007199254740991n;
+
+const huge = BigInt(9007199254740991);
+
+alert(typeof biggestInt); // shows "bigint"
+
+alert(typeof huge); // shows "bigint"
+```
+Bigint can mostly be used like number but there are some key differences
+- Most math operatioons work on it normally
+- It cannot be mixed and match with number while apllying binary operations it has to be coerced into each other but be careful it can lead to some precision losses
+- The / operator also works as expected with whole numbers. However, since these are BigInts and not BigDecimals, this operation will round towards 0, which is to say, it will not return any fractional digits.
+
+To  know more in detail about the java script newest addition in prmitive types please visit [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) docs for it
+
+
+```smart header="Compatability issues"
+Right now it only compatible with firefox and chrome but is not supported in Safari.
+```
+
 ## The typeof operator [#type-typeof]

 The `typeof` operator returns the type of the argument. It's useful when we want to process values of different types differently or just want to do a quick check.
@ -226,7 +251,7 @@ The last three lines may need additional explanation:

 ## Summary

-There are 7 basic data types in JavaScript.
+There are 8 basic data types in JavaScript.

 - `number` for numbers of any kind: integer or floating-point.
 - `string` for strings. A string may have one or more characters, there's no separate single-character type.
@ -235,6 +260,7 @@ There are 7 basic data types in JavaScript.
 - `undefined` for unassigned values -- a standalone type that has a single value `undefined`.
 - `object` for more complex data structures.
 - `symbol` for unique identifiers.
+- `bigint` is for displaying numbers greater than 2<sup>53</sup>-1

 The `typeof` operator allows us to see which type is stored in a variable.

--- a/1-js/02-first-steps/11-logical-operators/9-check-login/ifelse_task.svg
+++ b/1-js/02-first-steps/11-logical-operators/9-check-login/ifelse_task.svg
--- a/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg
+++ b/1-js/03-code-quality/01-debugging-chrome/chrome-open-sources.svg
--- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg
+++ b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-breakpoint.svg
--- a/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg
+++ b/1-js/03-code-quality/01-debugging-chrome/chrome-sources-debugger-trace-1.svg
--- a/1-js/03-code-quality/02-coding-style/code-style.svg
+++ b/1-js/03-code-quality/02-coding-style/code-style.svg
--- a/1-js/03-code-quality/06-polyfills/article.md
+++ b/1-js/03-code-quality/06-polyfills/article.md
@ -19,7 +19,7 @@ Here Babel comes to the rescue.

 Actually, there are two parts in Babel:

-1. First, the transpiler program, which rewrites the code. The developer runs it on their own computer. It rewrites the code into the older standard. And then the code is delivered to the website for users. Modern project build systems like [webpack](http://webpack.github.io/) provide means to run transpiler automatically on every code change, so that very easy to integrate into development process.
+1. First, the transpiler program, which rewrites the code. The developer runs it on their own computer. It rewrites the code into the older standard. And then the code is delivered to the website for users. Modern project build systems like [webpack](http://webpack.github.io/) provide means to run transpiler automatically on every code change, so that it's very easy to integrate into development process.

 2. Second, the polyfill.

--- a/1-js/04-object-basics/02-garbage-collection/family-delete-refs.svg
+++ b/1-js/04-object-basics/02-garbage-collection/family-delete-refs.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="337" height="204" viewBox="0 0 337 204"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family-delete-refs.svg"><path id="Line" fill="#9B9B9B" fill-rule="nonzero" d="M147.5 183.5v6h46v2h-46v6l-14-7 14-7z" opacity=".6"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M88 13h151v26H88z"/><text id="&lt;global-variable&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="92" y="30">&lt;global variable&gt;</tspan></text><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M123 80h78v26h-78z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="139" y="96">Object</tspan></text><path id="Rectangle-3" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M5 148h118v48H5z"/><text id="Object-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="39" y="165">Object</tspan></text><text id="wife" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="147" y="148">wife</tspan></text><text id="family" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="106" y="63">family</tspan></text><text id="name:-&quot;John&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="19" y="185">name: &quot;John&quot;</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M214 148h118v48H214z"/><text id="name:-&quot;Ann&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="230" y="185">name: &quot;Ann&quot;</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="242" y="127">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="244" y="165">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M164.5 43.5v18h6l-7 14-7-14h6v-18h2z"/><path id="Line-2" fill="#9B9B9B" fill-rule="nonzero" d="M114.75 111.108l1.142 1.642-35.328 24.575 3.426 4.926L68.5 144.5l7.495-13.741 3.426 4.925 35.329-24.576z" opacity=".6"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M180.5 149.5l14 7-14 7v-6h-48v-2h48v-6zM208.236 111.11l36.254 24.684 3.377-4.96L255.5 144.5l-15.512-2.093 3.376-4.959-36.253-24.684 1.125-1.653z"/><path id="Line-Copy" stroke="#EE6B47" stroke-linecap="square" stroke-width="2" d="M100.5 118.5l-11 14"/><path id="Line-Copy-2" stroke="#EE6B47" stroke-linecap="square" stroke-width="2" d="M89.5 118.5l11 14"/><path id="Line-Copy-4" stroke="#EE6B47" stroke-linecap="square" stroke-width="2" d="M172.5 183.5l-11 14"/><path id="Line-Copy-3" stroke="#EE6B47" stroke-linecap="square" stroke-width="2" d="M161.5 183.5l11 14"/><text id="father" fill="#9B9B9B" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="35" y="127">father</tspan></text><text id="husband" fill="#9B9B9B" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="136" y="181">husband</tspan></text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="337" height="204" viewBox="0 0 337 204"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family-delete-refs.svg"><path id="Line" fill="#9B9B9B" fill-rule="nonzero" d="M147.5 183.5v6h46v2h-46v6l-14-7 14-7z" opacity=".6"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M88 13h151v26H88z"/><text id="&lt;global-variable&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="92" y="30">&lt;global variable&gt;</tspan></text><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M123 80h78v26h-78z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="139" y="96">Object</tspan></text><path id="Rectangle-3" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M5 148h118v48H5z"/><text id="Object-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="39" y="165">Object</tspan></text><text id="wife" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="147" y="148">wife</tspan></text><text id="family" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="106" y="63">family</tspan></text><text id="name:-&quot;John&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="19" y="185">name: &quot;John&quot;</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M214 148h118v48H214z"/><text id="name:-&quot;Ann&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="230" y="185">name: &quot;Ann&quot;</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="242" y="127">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="244" y="165">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M164.5 43.5v18h6l-7 14-7-14h6v-18h2z"/><path id="Line-2" fill="#9B9B9B" fill-rule="nonzero" d="M114.75 111.108l1.142 1.642-.82.57-34.508 24.005 3.426 4.926L68.5 144.5l7.495-13.741 3.426 4.924 34.508-24.004.82-.571z" opacity=".6"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M180.5 149.5l14 7-14 7v-6h-48v-2h48v-6zM208.236 111.11l.827.563 35.427 24.121 3.377-4.96L255.5 144.5l-15.512-2.093 3.377-4.96-35.428-24.12-.826-.563 1.125-1.653z"/><path id="Line-Copy" stroke="#EE6B47" stroke-linecap="square" stroke-width="2" d="M100.5 118.5l-11 14"/><path id="Line-Copy-2" stroke="#EE6B47" stroke-linecap="square" stroke-width="2" d="M89.5 118.5l11 14"/><path id="Line-Copy-4" stroke="#EE6B47" stroke-linecap="square" stroke-width="2" d="M172.5 183.5l-11 14"/><path id="Line-Copy-3" stroke="#EE6B47" stroke-linecap="square" stroke-width="2" d="M161.5 183.5l11 14"/><text id="father" fill="#9B9B9B" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="35" y="127">father</tspan></text><text id="husband" fill="#9B9B9B" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="136" y="181">husband</tspan></text></g></g></svg>
--- a/1-js/04-object-basics/02-garbage-collection/family-no-family.svg
+++ b/1-js/04-object-basics/02-garbage-collection/family-no-family.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="420" height="279" viewBox="0 0 420 279"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family-no-family.svg"><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M211.5 228.5v6h46v2h-46v6l-14-7 14-7z"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M153 25h153v48H153z"/><text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="199" y="43">&lt;global&gt;</tspan></text><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M187 123h78v26h-78z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="203" y="139">Object</tspan></text><path id="Rectangle-3" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M69 193h118v48H69z"/><text id="Object-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="103" y="210">Object</tspan></text><text id="father" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="99" y="170">father</tspan></text><text id="wife" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="211" y="193">wife</tspan></text><text id="name:-&quot;John&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="83" y="230">name: &quot;John&quot;</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M278 193h118v48H278z"/><text id="name:-&quot;Ann&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="294" y="230">name: &quot;Ann&quot;</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="306" y="170">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="308" y="210">Object</tspan></text><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M178.75 154.108l1.142 1.642-35.328 24.575 3.426 4.926-15.49 2.249 7.495-13.741 3.426 4.925 35.329-24.576z"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M244.5 194.5l14 7-14 7v-6h-48v-2h48v-6z"/><text id="husband" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="200" y="226">husband</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M272.236 154.11l36.254 24.684 3.377-4.96L319.5 187.5l-15.512-2.093 3.376-4.959-36.253-24.684 1.125-1.653z"/><path id="Rectangle-5" stroke="#D0021B" stroke-width="2" d="M48 112h364v150H48z"/><text id="family:-null" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="183" y="66">family: null</tspan></text><g id="noun_48910_cc" transform="translate(8 110)"><path id="Shape" d="M17.503 1.75h-5.006a.341.341 0 00-.34.342v1.125h5.686V2.092a.341.341 0 00-.34-.341z"/><path id="Shape" fill="#D0021B" d="M28.364 3.217H19.59V2.092A2.09 2.09 0 0017.503 0h-5.006c-1.15 0-2.087.938-2.087 2.092v1.125H1.637c-.7 0-1.266.568-1.266 1.269v.09c0 .7.567 1.267 1.266 1.267h26.727c.699 0 1.266-.567 1.266-1.268v-.09c0-.7-.567-1.268-1.266-1.268zm-10.52 0h-5.687V2.092c0-.188.153-.341.34-.341h5.006a.34.34 0 01.34.34v1.126zM26.054 6.281H3.728c-1.298 0-2.35-.224-2.35 1.077L3.14 33.196c0 1.3 1.052 2.409 2.35 2.409h18.802c1.298 0 2.35-1.11 2.35-2.409l1.763-25.838c0-1.301-1.053-1.077-2.35-1.077zM9.637 32.193c-.377.012-.691-.261-.704-.612l-.694-19.917c-.012-.351.283-.647.66-.66.376-.013.69.261.703.613l.694 19.916c.013.351-.283.647-.659.66zm6.044-.63c0 .352-.306.637-.682.637-.377 0-.682-.286-.682-.637V11.634c0-.351.305-.636.682-.636.376 0 .682.285.682.636v19.93zm5.384.018c-.012.351-.327.625-.704.612-.376-.013-.672-.308-.66-.66l.695-19.916c.012-.352.326-.626.703-.613.377.014.672.309.66.66l-.694 19.917z"/></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="420" height="279" viewBox="0 0 420 279"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family-no-family.svg"><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M211.5 228.5v6h46v2h-46v6l-14-7 14-7z"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M153 25h153v48H153z"/><text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="199" y="43">&lt;global&gt;</tspan></text><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M187 123h78v26h-78z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="203" y="139">Object</tspan></text><path id="Rectangle-3" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M69 193h118v48H69z"/><text id="Object-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="103" y="210">Object</tspan></text><text id="father" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="99" y="170">father</tspan></text><text id="wife" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="211" y="193">wife</tspan></text><text id="name:-&quot;John&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="83" y="230">name: &quot;John&quot;</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M278 193h118v48H278z"/><text id="name:-&quot;Ann&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="294" y="230">name: &quot;Ann&quot;</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="306" y="170">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="308" y="210">Object</tspan></text><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M178.75 154.108l1.142 1.642-.82.57-34.508 24.005 3.426 4.926-15.49 2.249 7.495-13.741 3.426 4.924 34.508-24.004.82-.571z"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M244.5 194.5l14 7-14 7v-6h-48v-2h48v-6z"/><text id="husband" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="200" y="226">husband</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M272.236 154.11l.827.563 35.427 24.121 3.377-4.96L319.5 187.5l-15.512-2.093 3.377-4.96-35.428-24.12-.826-.563 1.125-1.653z"/><path id="Rectangle-5" stroke="#D0021B" stroke-width="2" d="M48 112h364v150H48z"/><text id="family:-null" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="183" y="66">family: null</tspan></text><g id="noun_48910_cc" transform="translate(8 110)"><path id="Shape" d="M17.503 1.75h-5.006a.341.341 0 00-.34.342v1.125h5.686V2.092a.341.341 0 00-.34-.341z"/><path id="Shape" fill="#D0021B" d="M28.364 3.217H19.59V2.092A2.09 2.09 0 0017.503 0h-5.006c-1.15 0-2.087.938-2.087 2.092v1.125H1.637c-.7 0-1.266.568-1.266 1.269v.09c0 .7.567 1.267 1.266 1.267h26.727c.699 0 1.266-.567 1.266-1.268v-.09c0-.7-.567-1.268-1.266-1.268zm-10.52 0h-5.687V2.092c0-.188.153-.341.34-.341h5.006a.34.34 0 01.34.34v1.126zM26.054 6.281H3.728c-1.298 0-2.35-.224-2.35 1.077L3.14 33.196c0 1.3 1.052 2.409 2.35 2.409h18.802c1.298 0 2.35-1.11 2.35-2.409l1.763-25.838c0-1.301-1.053-1.077-2.35-1.077zM9.637 32.193c-.377.012-.691-.261-.704-.612l-.694-19.917c-.012-.351.283-.647.66-.66.376-.013.69.261.703.613l.694 19.916c.013.351-.283.647-.659.66zm6.044-.63c0 .352-.306.637-.682.637-.377 0-.682-.286-.682-.637V11.634c0-.351.305-.636.682-.636.376 0 .682.285.682.636v19.93zm5.384.018c-.012.351-.327.625-.704.612-.376-.013-.672-.308-.66-.66l.695-19.916c.012-.352.326-.626.703-.613.377.014.672.309.66.66l-.694 19.917z"/></g></g></g></svg>
--- a/1-js/04-object-basics/02-garbage-collection/family-no-father.svg
+++ b/1-js/04-object-basics/02-garbage-collection/family-no-father.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="399" height="225" viewBox="0 0 399 225"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family-no-father.svg"><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M187 78h78v26h-78z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="203" y="94">Object</tspan></text><path id="Rectangle-3" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M69 146h118v48H69z"/><text id="Object-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="103" y="163">Object</tspan></text><text id="wife" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="211" y="146">wife</tspan></text><text id="family" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="171" y="61">family</tspan></text><text id="name:-&quot;John&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="83" y="183">name: &quot;John&quot;</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M278 146h118v48H278z"/><text id="name:-&quot;Ann&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="299" y="183">name: &quot;Ann&quot;</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="306" y="125">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="308" y="163">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M228.5 41.5v18h6l-7 14-7-14h6v-18h2zM244.5 147.5l14 7-14 7v-6h-48v-2h48v-6zM272.236 109.11l36.254 24.684 3.377-4.96L319.5 142.5l-15.512-2.093 3.376-4.959-36.253-24.684 1.125-1.653z"/><path id="Rectangle-5" stroke="#D0021B" stroke-width="2" d="M48 117h217v99H48z"/><g id="noun_48910_cc" transform="translate(7 114)"><path id="Shape" d="M17.503 1.75h-5.006a.341.341 0 00-.34.342v1.125h5.686V2.092a.341.341 0 00-.34-.341z"/><path id="Shape" fill="#D0021B" d="M28.364 3.217H19.59V2.092A2.09 2.09 0 0017.503 0h-5.006c-1.15 0-2.087.938-2.087 2.092v1.125H1.637c-.7 0-1.266.568-1.266 1.269v.09c0 .7.567 1.267 1.266 1.267h26.727c.699 0 1.266-.567 1.266-1.268v-.09c0-.7-.567-1.268-1.266-1.268zm-10.52 0h-5.687V2.092c0-.188.153-.341.34-.341h5.006a.34.34 0 01.34.34v1.126zM26.054 6.281H3.728c-1.298 0-2.35-.224-2.35 1.077L3.14 33.196c0 1.3 1.052 2.409 2.35 2.409h18.802c1.298 0 2.35-1.11 2.35-2.409l1.763-25.838c0-1.301-1.053-1.077-2.35-1.077zM9.637 32.193c-.377.012-.691-.261-.704-.612l-.694-19.917c-.012-.351.283-.647.66-.66.376-.013.69.261.703.613l.694 19.916c.013.351-.283.647-.659.66zm6.044-.63c0 .352-.306.637-.682.637-.377 0-.682-.286-.682-.637V11.634c0-.351.305-.636.682-.636.376 0 .682.285.682.636v19.93zm5.384.018c-.012.351-.327.625-.704.612-.376-.013-.672-.308-.66-.66l.695-19.916c.012-.352.326-.626.703-.613.377.014.672.309.66.66l-.694 19.917z"/></g><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M181 13h93v26h-93z"/><text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="197" y="30">&lt;global&gt;</tspan></text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="399" height="225" viewBox="0 0 399 225"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family-no-father.svg"><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M187 78h78v26h-78z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="203" y="94">Object</tspan></text><path id="Rectangle-3" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M69 146h118v48H69z"/><text id="Object-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="103" y="163">Object</tspan></text><text id="wife" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="211" y="146">wife</tspan></text><text id="family" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="171" y="61">family</tspan></text><text id="name:-&quot;John&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="83" y="183">name: &quot;John&quot;</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M278 146h118v48H278z"/><text id="name:-&quot;Ann&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="299" y="183">name: &quot;Ann&quot;</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="306" y="125">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="308" y="163">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M228.5 41.5v18h6l-7 14-7-14h6v-18h2zM244.5 147.5l14 7-14 7v-6h-48v-2h48v-6zM272.236 109.11l.827.563 35.427 24.121 3.377-4.96L319.5 142.5l-15.512-2.093 3.377-4.96-35.428-24.12-.826-.563 1.125-1.653z"/><path id="Rectangle-5" stroke="#D0021B" stroke-width="2" d="M48 117h217v99H48z"/><g id="noun_48910_cc" transform="translate(7 114)"><path id="Shape" d="M17.503 1.75h-5.006a.341.341 0 00-.34.342v1.125h5.686V2.092a.341.341 0 00-.34-.341z"/><path id="Shape" fill="#D0021B" d="M28.364 3.217H19.59V2.092A2.09 2.09 0 0017.503 0h-5.006c-1.15 0-2.087.938-2.087 2.092v1.125H1.637c-.7 0-1.266.568-1.266 1.269v.09c0 .7.567 1.267 1.266 1.267h26.727c.699 0 1.266-.567 1.266-1.268v-.09c0-.7-.567-1.268-1.266-1.268zm-10.52 0h-5.687V2.092c0-.188.153-.341.34-.341h5.006a.34.34 0 01.34.34v1.126zM26.054 6.281H3.728c-1.298 0-2.35-.224-2.35 1.077L3.14 33.196c0 1.3 1.052 2.409 2.35 2.409h18.802c1.298 0 2.35-1.11 2.35-2.409l1.763-25.838c0-1.301-1.053-1.077-2.35-1.077zM9.637 32.193c-.377.012-.691-.261-.704-.612l-.694-19.917c-.012-.351.283-.647.66-.66.376-.013.69.261.703.613l.694 19.916c.013.351-.283.647-.659.66zm6.044-.63c0 .352-.306.637-.682.637-.377 0-.682-.286-.682-.637V11.634c0-.351.305-.636.682-.636.376 0 .682.285.682.636v19.93zm5.384.018c-.012.351-.327.625-.704.612-.376-.013-.672-.308-.66-.66l.695-19.916c.012-.352.326-.626.703-.613.377.014.672.309.66.66l-.694 19.917z"/></g><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M181 13h93v26h-93z"/><text id="&lt;global&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="197" y="30">&lt;global&gt;</tspan></text></g></g></svg>
--- a/1-js/04-object-basics/02-garbage-collection/family.svg
+++ b/1-js/04-object-basics/02-garbage-collection/family.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="337" height="204" viewBox="0 0 337 204"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family.svg"><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M147.5 183.5v6h46v2h-46v6l-14-7 14-7z"/><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M123 80h78v26h-78z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="139" y="96">Object</tspan></text><path id="Rectangle-3" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M5 148h118v48H5z"/><text id="Object-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="39" y="165">Object</tspan></text><text id="father" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="35" y="127">father</tspan></text><text id="wife" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="147" y="148">wife</tspan></text><text id="family" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="107" y="63">family</tspan></text><text id="name:-&quot;John&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="19" y="185">name: &quot;John&quot;</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M214 148h118v48H214z"/><text id="name:-&quot;Ann&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="230" y="185">name: &quot;Ann&quot;</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="242" y="127">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="244" y="165">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M164.5 43.5v18h6l-7 14-7-14h6v-18h2z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M114.75 111.108l1.142 1.642-35.328 24.575 3.426 4.926L68.5 144.5l7.495-13.741 3.426 4.925 35.329-24.576z"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M180.5 149.5l14 7-14 7v-6h-48v-2h48v-6z"/><text id="husband" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="136" y="181">husband</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M208.236 111.11l36.254 24.684 3.377-4.96L255.5 144.5l-15.512-2.093 3.376-4.959-36.253-24.684 1.125-1.653z"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M88 13h151v26H88z"/><text id="&lt;global-variable&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="92" y="30">&lt;global variable&gt;</tspan></text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="337" height="204" viewBox="0 0 337 204"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="garbage-collection" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="family.svg"><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M147.5 183.5v6h46v2h-46v6l-14-7 14-7z"/><path id="Rectangle-2" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M123 80h78v26h-78z"/><text id="Object" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="139" y="96">Object</tspan></text><path id="Rectangle-3" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M5 148h118v48H5z"/><text id="Object-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="39" y="165">Object</tspan></text><text id="father" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="35" y="127">father</tspan></text><text id="wife" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="147" y="148">wife</tspan></text><text id="family" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="107" y="63">family</tspan></text><text id="name:-&quot;John&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="19" y="185">name: &quot;John&quot;</tspan></text><path id="Rectangle-4" fill="#FFF9EB" stroke="#BCA68E" stroke-width="2" d="M214 148h118v48H214z"/><text id="name:-&quot;Ann&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="230" y="185">name: &quot;Ann&quot;</tspan></text><text id="mother" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="242" y="127">mother</tspan></text><text id="Object-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="244" y="165">Object</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M164.5 43.5v18h6l-7 14-7-14h6v-18h2z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M114.75 111.108l1.142 1.642-.82.57-34.508 24.005 3.426 4.926L68.5 144.5l7.495-13.741 3.426 4.924 34.508-24.004.82-.571z"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M180.5 149.5l14 7-14 7v-6h-48v-2h48v-6z"/><text id="husband" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="136" y="181">husband</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M208.236 111.11l.827.563 35.427 24.121 3.377-4.96L255.5 144.5l-15.512-2.093 3.377-4.96-35.428-24.12-.826-.563 1.125-1.653z"/><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M88 13h151v26H88z"/><text id="&lt;global-variable&gt;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="92" y="30">&lt;global variable&gt;</tspan></text></g></g></svg>
--- a/1-js/04-object-basics/02-garbage-collection/garbage-collection-1.svg
+++ b/1-js/04-object-basics/02-garbage-collection/garbage-collection-1.svg
--- a/1-js/04-object-basics/02-garbage-collection/garbage-collection-2.svg
+++ b/1-js/04-object-basics/02-garbage-collection/garbage-collection-2.svg
--- a/1-js/04-object-basics/02-garbage-collection/garbage-collection-3.svg
+++ b/1-js/04-object-basics/02-garbage-collection/garbage-collection-3.svg
--- a/1-js/04-object-basics/02-garbage-collection/garbage-collection-4.svg
+++ b/1-js/04-object-basics/02-garbage-collection/garbage-collection-4.svg
--- a/1-js/04-object-basics/02-garbage-collection/garbage-collection-5.svg
+++ b/1-js/04-object-basics/02-garbage-collection/garbage-collection-5.svg
--- a/1-js/05-data-types/11-date/8-format-date-relative/solution.md
+++ b/1-js/05-data-types/11-date/8-format-date-relative/solution.md
@ -62,6 +62,8 @@ function formatDate(date) {
  year = year.toString().slice(-2);
  month = month < 10 ? '0' + month : month;
  dayOfMonth = dayOfMonth < 10 ? '0' + dayOfMonth : dayOfMonth;
+  hour = hour < 10 ? '0' + hour : hour;
+  minutes = minutes < 10 ? '0' + minutes : minutes;

  if (diffSec < 1) {
    return 'right now';  
--- a/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree.svg
+++ b/1-js/06-advanced-functions/01-recursion/03-fibonacci-numbers/fibonacci-recursion-tree.svg
--- a/1-js/06-advanced-functions/01-recursion/linked-list-remove-1.svg
+++ b/1-js/06-advanced-functions/01-recursion/linked-list-remove-1.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="670" height="143" viewBox="0 0 670 143"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="linked-list-remove-1.svg"><path id="Rectangle-15" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M47 30h90v32H47z"/><text id="value" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="43" y="20">value</tspan></text><text id="&quot;new-item&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="51" y="49">&quot;new item&quot;</tspan></text><path id="Line-21" fill="#EE6B47" fill-rule="nonzero" d="M190.27 38l14 7-14 7-.001-6H131.73v-2h58.539l.001-6z"/><text id="next" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="156" y="34">next</tspan></text><path id="Rectangle-15-Copy" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M117 104h78v32h-78z" opacity=".6"/><text id="value-copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" opacity=".6"><tspan x="118" y="94">value</tspan></text><text id="1" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" opacity=".6"><tspan x="149" y="124">1</tspan></text><path id="Line-21-Copy" fill="#EE6B47" fill-rule="nonzero" d="M229.5 75.5l-5.638 14.602-4.041-4.437-38.157 34.748-1.347-1.48 38.158-34.747-4.04-4.436L229.5 75.5z" opacity=".6"/><text id="next-copy" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" opacity=".6"><tspan x="214" y="108">next</tspan></text><path id="Rectangle-11" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M208 30h78v32h-78z"/><text id="value-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="210" y="20">value</tspan></text><text id="-9" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="242" y="50">2</tspan></text><path id="Line-22" fill="#EE6B47" fill-rule="nonzero" d="M330.27 38l14 7-14 7v-6h-58.54v-2h58.54v-6z"/><text id="next-2" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="296" y="34">next</tspan></text><path id="Rectangle-13" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M347 30h78v32h-78z"/><text id="value-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="349" y="20">value</tspan></text><text id="-10" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="381" y="50">3</tspan></text><path id="Line-23" fill="#EE6B47" fill-rule="nonzero" d="M469.27 38l14 7-14 7v-6h-58.54v-2h58.54v-6z"/><text id="next-3" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="435" y="34">next</tspan></text><path id="Rectangle-14" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M487 30h78v32h-78z"/><text id="value-4" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="489" y="20">value</tspan></text><text id="4" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="521" y="50">4</tspan></text><path id="Line-24" fill="#EE6B47" fill-rule="nonzero" d="M609.27 38l14 7-14 7v-6h-58.54v-2h58.54v-6z"/><text id="next-4" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="575" y="34">next</tspan></text><text id="null" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="631" y="49">null</tspan></text><text id="list" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="8" y="49">list</tspan></text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="670" height="143" viewBox="0 0 670 143"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="linked-list-remove-1.svg"><path id="Rectangle-15" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M47 30h90v32H47z"/><text id="value" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="43" y="20">value</tspan></text><text id="&quot;new-item&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="51" y="49">&quot;new item&quot;</tspan></text><path id="Line-21" fill="#EE6B47" fill-rule="nonzero" d="M190.27 38l14 7-14 7-.001-6H131.73v-2h58.539l.001-6z"/><text id="next" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="156" y="34">next</tspan></text><path id="Rectangle-15-Copy" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M117 104h78v32h-78z" opacity=".6"/><text id="value-copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" opacity=".6"><tspan x="118" y="94">value</tspan></text><text id="1" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" opacity=".6"><tspan x="149" y="124">1</tspan></text><path id="Line-21-Copy" fill="#EE6B47" fill-rule="nonzero" d="M229.5 75.5l-5.638 14.602-4.04-4.437-37.419 34.074-.74.674-1.346-1.48.74-.672 37.418-34.074-4.04-4.437L229.5 75.5z" opacity=".6"/><text id="next-copy" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" opacity=".6"><tspan x="214" y="108">next</tspan></text><path id="Rectangle-11" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M208 30h78v32h-78z"/><text id="value-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="210" y="20">value</tspan></text><text id="-9" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="242" y="50">2</tspan></text><path id="Line-22" fill="#EE6B47" fill-rule="nonzero" d="M330.27 38l14 7-14 7v-6h-58.54v-2h58.54v-6z"/><text id="next-2" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="296" y="34">next</tspan></text><path id="Rectangle-13" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M347 30h78v32h-78z"/><text id="value-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="349" y="20">value</tspan></text><text id="-10" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="381" y="50">3</tspan></text><path id="Line-23" fill="#EE6B47" fill-rule="nonzero" d="M469.27 38l14 7-14 7v-6h-58.54v-2h58.54v-6z"/><text id="next-3" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="435" y="34">next</tspan></text><path id="Rectangle-14" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M487 30h78v32h-78z"/><text id="value-4" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="489" y="20">value</tspan></text><text id="4" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="521" y="50">4</tspan></text><path id="Line-24" fill="#EE6B47" fill-rule="nonzero" d="M609.27 38l14 7-14 7v-6h-58.54v-2h58.54v-6z"/><text id="next-4" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="575" y="34">next</tspan></text><text id="null" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="631" y="49">null</tspan></text><text id="list" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="8" y="49">list</tspan></text></g></g></svg>
--- a/1-js/06-advanced-functions/01-recursion/recursion-pow.svg
+++ b/1-js/06-advanced-functions/01-recursion/recursion-pow.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="502" height="225" viewBox="0 0 502 225"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="recursion-pow.svg"><g id="Rectangle-1-+-Корень" transform="translate(159 2)"><rect id="Rectangle-1" width="78" height="28" x="1" y="1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" rx="14"/><text id="pow(x,n)" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="8" y="19">pow(x,n)</tspan></text></g><g id="Rectangle-1-+-Корень-Copy-2" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" transform="translate(5 192)"><rect id="Rectangle-1" width="85" height="28" x="1" y="1" rx="14"/></g><text id="x" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="46.5" y="210">x</tspan></text><g id="Rectangle-1-+-Корень-Copy-3" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" transform="translate(353 120)"><rect id="Rectangle-1" width="140" height="28" x="1" y="1" rx="14"/></g><text id="x-*-pow(x,-n-1)" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="362.5" y="138">x * pow(x, n-1)</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M201 32v41h8l-9.5 19-9.5-19h8V32h3z"/><path id="Path-1218" fill="#EE6B47" fill-rule="nonzero" d="M110.691 129.367v3H51.39v35.18h8l-9.5 19-9.5-19h8v-38.18h62.302z"/><path id="Rectangle-356" fill="#FFF" d="M18 143h60v20H18z"/><g id="Rectangle-354-+-Каково-“официальное”" transform="translate(117 100)"><path id="Rectangle-354" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M2.53 35.5L82.5 69.911 162.47 35.5 82.5 1.089 2.53 35.5z"/><text id="n-==-1-?" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="54.9" y="40">n == 1 ?</tspan></text></g><text id="Yes" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="40" y="156">Yes</tspan></text><text id="No" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="299" y="123">No</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M324 124l19 9.5-19 9.5v-8h-38v-3h38v-8z"/><path id="Line-decoration-1" fill="#EE6B47" stroke="#EE6B47" stroke-width="3" d="M219 59l10.8-3v6z"/><path id="Line" stroke="#EE6B47" stroke-dasharray="5,5" stroke-linecap="square" stroke-width="3" d="M420.5 111.5v-53"/><text id="recursive-call-until" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="233.5" y="49">recursive call until n==1</tspan></text><path id="Line-Copy" stroke="#EE6B47" stroke-dasharray="5,5" stroke-linecap="square" stroke-width="3" d="M232.5 58.5h189"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="502" height="225" viewBox="0 0 502 225"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="recursion-pow.svg"><g id="Rectangle-1-+-Корень" transform="translate(159 2)"><rect id="Rectangle-1" width="78" height="28" x="1" y="1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" rx="14"/><text id="pow(x,n)" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="8" y="19">pow(x,n)</tspan></text></g><g id="Rectangle-1-+-Корень-Copy-2" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" transform="translate(5 192)"><rect id="Rectangle-1" width="85" height="28" x="1" y="1" rx="14"/></g><text id="x" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="46.5" y="210">x</tspan></text><g id="Rectangle-1-+-Корень-Copy-3" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" transform="translate(353 120)"><rect id="Rectangle-1" width="140" height="28" x="1" y="1" rx="14"/></g><text id="x-*-pow(x,-n-1)" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="362.5" y="138">x * pow(x, n-1)</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M201 32v41h8l-9.5 19-9.5-19h8V32h3z"/><path id="Path-1218" fill="#EE6B47" fill-rule="nonzero" d="M110.691 129.367v3l-59.302-.001v35.181h8l-9.5 19-9.5-19h8v-38.18h62.302z"/><path id="Rectangle-356" fill="#FFF" d="M18 143h60v20H18z"/><g id="Rectangle-354-+-Каково-“официальное”" transform="translate(117 100)"><path id="Rectangle-354" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M2.53 35.5L82.5 69.911 162.47 35.5 82.5 1.089 2.53 35.5z"/><text id="n-==-1-?" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="54.9" y="40">n == 1 ?</tspan></text></g><text id="Yes" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="40" y="156">Yes</tspan></text><text id="No" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="299" y="123">No</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M324 124l19 9.5-19 9.5v-8h-38v-3h38v-8z"/><path id="Line-decoration-1" fill="#EE6B47" stroke="#EE6B47" stroke-width="3" d="M219 59l10.8-3v6z"/><path id="Line" stroke="#EE6B47" stroke-dasharray="5,5" stroke-linecap="square" stroke-width="3" d="M420.5 111.5v-53"/><text id="recursive-call-until" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="233.5" y="49">recursive call until n==1</tspan></text><path id="Line-Copy" stroke="#EE6B47" stroke-dasharray="5,5" stroke-linecap="square" stroke-width="3" d="M232.5 58.5h189"/></g></g></svg>
--- a/1-js/06-advanced-functions/01-recursion/recursive-salaries.svg
+++ b/1-js/06-advanced-functions/01-recursion/recursive-salaries.svg
--- a/1-js/06-advanced-functions/03-closure/8-make-army/task.md
+++ b/1-js/06-advanced-functions/03-closure/8-make-army/task.md
@ -31,5 +31,5 @@ army[5](); // and number 5 also outputs 10...
 // ... all shooters show 10 instead of their 0, 1, 2, 3...
 ```

-Why all shooters show the same? Fix the code so that they work as intended.
+Why do all of the shooters show the same value? Fix the code so that they work as intended.

--- a/1-js/06-advanced-functions/03-closure/lexenv-if.svg
+++ b/1-js/06-advanced-functions/03-closure/lexenv-if.svg
--- a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2.svg
+++ b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-2.svg
--- a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3.svg
+++ b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-3.svg
--- a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4.svg
+++ b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-4.svg
--- a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5.svg
+++ b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-5.svg
--- a/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6.svg
+++ b/1-js/06-advanced-functions/03-closure/lexenv-nested-makecounter-6.svg
--- a/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.svg
+++ b/1-js/06-advanced-functions/03-closure/lexical-environment-simple-lookup.svg
--- a/1-js/06-advanced-functions/03-closure/lexical-environment-simple.svg
+++ b/1-js/06-advanced-functions/03-closure/lexical-environment-simple.svg
--- a/1-js/06-advanced-functions/03-closure/lexical-search-order.svg
+++ b/1-js/06-advanced-functions/03-closure/lexical-search-order.svg
--- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md
+++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md
@ -149,8 +149,8 @@ let user = { name: "John" };
 let admin = { name: "Admin" };

 // use call to pass different objects as "this"
-sayHi.call( user ); // this = John
-sayHi.call( admin ); // this = Admin
+sayHi.call( user ); // John
+sayHi.call( admin ); // Admin
 ```

 And here we use `call` to call `say` with the given context and phrase:
--- a/1-js/06-advanced-functions/10-bind/article.md
+++ b/1-js/06-advanced-functions/10-bind/article.md
@ -279,7 +279,7 @@ What if we'd like to fix some arguments, but not the context `this`? For example

 The native `bind` does not allow that. We can't just omit the context and jump to arguments.

-Fortunately, a helper function `partial` for binding only arguments can be easily implemented.
+Fortunately, a function `partial` for binding only arguments can be easily implemented.

 Like this:

--- a/1-js/07-object-properties/02-property-accessors/article.md
+++ b/1-js/07-object-properties/02-property-accessors/article.md
@ -94,11 +94,7 @@ alert(user.name); // Alice
 alert(user.surname); // Cooper
 ```

-As the result, we have a "virtual" property `fullName`. It is readable and writable, but in fact does not exist.
-
-```smart header="No way to handle `delete`"
-There's no similar method to handle deletion of an accessor property. Only getter/setter methods may exist.
-```
+As the result, we have a "virtual" property `fullName`. It is readable and writable.

 ## Accessor descriptors

--- a/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg
+++ b/1-js/08-prototypes/03-native-prototypes/native-prototypes-classes.svg
--- a/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg
+++ b/1-js/09-classes/02-class-inheritance/animal-rabbit-extends.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="560" height="316" viewBox="0 0 560 316"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="inheritance" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="animal-rabbit-extends.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M242 23h185v64H242z"/><text id="constructor:-Animal" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="252" y="42">constructor: Animal</tspan> <tspan x="252" y="57">run: function</tspan> <tspan x="252" y="72">stop: function</tspan></text><path id="Rectangle-1-Copy" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M242 286h185v28H242z"/><text id="Animal.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="241" y="15">Animal.prototype</tspan></text><path id="Rectangle-1-Copy-4" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M242 166h185v48H242z"/><text id="constructor:-Rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="252" y="185">constructor: Rabbit</tspan> <tspan x="252" y="200">hide: function</tspan></text><text id="Rabbit.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="241" y="158">Rabbit.prototype</tspan></text><path id="Rectangle-1-Copy-2" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M11 23h105v48H11z"/><text id="Animal" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="10" y="15">Animal</tspan></text><path id="Rectangle-1-Copy-3" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M11 166h105v48H11z"/><text id="Rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="10" y="158">Rabbit</tspan></text><text id="new-Rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="247" y="278">new Rabbit</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M330.5 96.5l7 14h-6v28h-2v-28h-6l7-14z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M211 40l14 7-14 7v-6h-79v-2h79v-6z"/><path id="Line-Copy-4" fill="#EE6B47" fill-rule="nonzero" d="M489.157 87.31l.533.847-26.232 16.515 7.761-.384.05.999-10.555.523 5.034-9.292.879.476-3.702 6.831 26.232-16.515z"/><text id="[[Prototype]]" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="340" y="120">[[Prototype]]</tspan></text><path id="Line-Copy-3" fill="#EE6B47" fill-rule="nonzero" d="M330.5 230.5l7 14h-6v28h-2v-28h-6l7-14z"/><text id="[[Prototype]]-Copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="340" y="254">[[Prototype]]</tspan></text><text id="prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="139" y="35">prototype</tspan></text><path id="Line-Copy-2" fill="#EE6B47" fill-rule="nonzero" d="M211 182l14 7-14 7v-6h-79v-2h79v-6z"/><text id="prototype-copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="139" y="176">prototype</tspan></text><text id="name:-&quot;White-Rabbit&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="253" y="304">name: &quot;White Rabbit&quot;</tspan></text><text id="constructor" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="17" y="41">constructor</tspan></text><text id="constructor-copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="17" y="183">constructor</tspan></text><ellipse id="Oval" cx="391.5" cy="117.5" stroke="#EE6B47" rx="70.5" ry="20.5"/><text id="extends" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal"><tspan x="489" y="83">extends</tspan></text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="560" height="316" viewBox="0 0 560 316"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="inheritance" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="animal-rabbit-extends.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M242 23h185v64H242z"/><text id="constructor:-Animal" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="252" y="42">constructor: Animal</tspan> <tspan x="252" y="57">run: function</tspan> <tspan x="252" y="72">stop: function</tspan></text><path id="Rectangle-1-Copy" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M242 286h185v28H242z"/><text id="Animal.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="241" y="15">Animal.prototype</tspan></text><path id="Rectangle-1-Copy-4" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M242 166h185v48H242z"/><text id="constructor:-Rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="252" y="185">constructor: Rabbit</tspan> <tspan x="252" y="200">hide: function</tspan></text><text id="Rabbit.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="241" y="158">Rabbit.prototype</tspan></text><path id="Rectangle-1-Copy-2" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M11 23h105v48H11z"/><text id="Animal" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="10" y="15">Animal</tspan></text><path id="Rectangle-1-Copy-3" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M11 166h105v48H11z"/><text id="Rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="10" y="158">Rabbit</tspan></text><text id="new-Rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="247" y="278">new Rabbit</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M330.5 96.5l7 14h-6v28h-2v-28h-6l7-14z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M211 40l14 7-14 7v-6h-79v-2h79v-6z"/><path id="Line-Copy-4" fill="#EE6B47" fill-rule="nonzero" d="M489.157 87.31l.533.847-.424.266-20.68 13.021-5.129 3.228 7.263-.36.499-.024.05.999-.5.024-9.167.455-.888.044.423-.782 4.372-8.07.239-.44.879.476-.238.44-3.464 6.392 5.128-3.228 20.68-13.021.424-.267z"/><text id="[[Prototype]]" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="340" y="120">[[Prototype]]</tspan></text><path id="Line-Copy-3" fill="#EE6B47" fill-rule="nonzero" d="M330.5 230.5l7 14h-6v28h-2v-28h-6l7-14z"/><text id="[[Prototype]]-Copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="340" y="254">[[Prototype]]</tspan></text><text id="prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="139" y="35">prototype</tspan></text><path id="Line-Copy-2" fill="#EE6B47" fill-rule="nonzero" d="M211 182l14 7-14 7v-6h-79v-2h79v-6z"/><text id="prototype-copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="139" y="176">prototype</tspan></text><text id="name:-&quot;White-Rabbit&quot;" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="253" y="304">name: &quot;White Rabbit&quot;</tspan></text><text id="constructor" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="17" y="41">constructor</tspan></text><text id="constructor-copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="17" y="183">constructor</tspan></text><ellipse id="Oval" cx="391.5" cy="117.5" stroke="#EE6B47" rx="70.5" ry="20.5"/><text id="extends" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal"><tspan x="489" y="83">extends</tspan></text></g></g></svg>
--- a/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.svg
+++ b/1-js/09-classes/02-class-inheritance/super-homeobject-wrong.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="395" height="192" viewBox="0 0 395 192"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="inheritance" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="super-homeobject-wrong.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M237 30v28h98V30h-98z"/><text id="sayHi" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="247" y="48">sayHi</tspan></text><text id="plant" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="241" y="22">plant</tspan></text><path id="Rectangle-1-Copy-4" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M237 143v28h98v-28h-98z"/><text id="sayHi" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="247" y="162">sayHi</tspan></text><text id="tree" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="241" y="135">tree</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M287.5 70.5l7 14h-6v28h-2v-28h-6l7-14z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M121.025 150.55l-.022 6 125 .454-.007 2-125-.454-.021 6L107 157.5l14.025-6.95z"/><path id="Rectangle-1-Copy-3" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M8 30h98v28H8z"/><text id="sayHi" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="18" y="48">sayHi</tspan></text><path id="Rectangle-1-Copy-2" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M8 143h98v28H8z"/><text id="animal" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="12" y="22">animal</tspan></text><text id="rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="12" y="131">rabbit</tspan></text><path id="Line-Copy-4" fill="#EE6B47" fill-rule="nonzero" d="M58.5 72.5l7 14h-6v28h-2v-28h-6l7-14z"/><text id="[[HomeObject]]" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="115" y="142">[[HomeObject]]</tspan></text><text id="sayHi" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="16" y="162">sayHi</tspan></text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="395" height="192" viewBox="0 0 395 192"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="inheritance" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="super-homeobject-wrong.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M237 30v28h98V30h-98z"/><text id="sayHi" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="247" y="48">sayHi</tspan></text><text id="plant" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="241" y="22">plant</tspan></text><path id="Rectangle-1-Copy-4" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M237 143v28h98v-28h-98z"/><text id="sayHi" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="247" y="162">sayHi</tspan></text><text id="tree" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="241" y="135">tree</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M287.5 70.5l7 14h-6v28h-2v-28h-6l7-14z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M121.025 150.55l-.022 6.001 124 .449 1 .004-.007 2-1-.004-124-.449-.021 6L107 157.5l14.025-6.95z"/><path id="Rectangle-1-Copy-3" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M8 30h98v28H8z"/><text id="sayHi" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="18" y="48">sayHi</tspan></text><path id="Rectangle-1-Copy-2" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M8 143h98v28H8z"/><text id="animal" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="12" y="22">animal</tspan></text><text id="rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="12" y="131">rabbit</tspan></text><path id="Line-Copy-4" fill="#EE6B47" fill-rule="nonzero" d="M58.5 72.5l7 14h-6v28h-2v-28h-6l7-14z"/><text id="[[HomeObject]]" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="115" y="142">[[HomeObject]]</tspan></text><text id="sayHi" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="16" y="162">sayHi</tspan></text></g></g></svg>
--- a/1-js/09-classes/03-static-properties-methods/article.md
+++ b/1-js/09-classes/03-static-properties-methods/article.md
@ -20,7 +20,7 @@ User.staticMethod(); // true
 That actually does the same as assigning it as a property directly:

 ```js run
-class User() { }
+class User { }

 User.staticMethod = function() {
  alert(this === User);
--- a/1-js/09-classes/06-instanceof/instanceof.svg
+++ b/1-js/09-classes/06-instanceof/instanceof.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="509" height="435" viewBox="0 0 509 435"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="inheritance" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="instanceof.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M9 200h139v28H9z"/><text id="Animal.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="8" y="192">Animal.prototype</tspan></text><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M9 94h139v28H9z"/><text id="Object.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="8" y="86">Object.prototype</tspan></text><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M68.5 134.5l7 14h-6v28h-2v-28h-6l7-14z"/><path id="Rectangle-1-Copy" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M9 307h139v28H9z"/><text id="Rabbit.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="8" y="299">Rabbit.prototype</tspan></text><path id="Line-2-Copy" fill="#EE6B47" fill-rule="nonzero" d="M68.5 241.5l7 14h-6v28h-2v-28h-6l7-14z"/><text id="[[Prototype]]" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="80" y="266">[[Prototype]]</tspan></text><path id="Rectangle-1-Copy-2" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M9 398h139v28H9z"/><text id="rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="8" y="390">rabbit</tspan></text><path id="Line-2-Copy-2" fill="#EE6B47" fill-rule="nonzero" d="M68.5 347.5l7 14h-6v28h-2v-28h-6l7-14z"/><text id="[[Prototype]]-Copy-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="80" y="372">[[Prototype]]</tspan></text><text id="[[Prototype]]-Copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="80" y="159">[[Prototype]]</tspan></text><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M70.5 27.5l7 14h-6v28h-2v-28h-6l7-14z"/><text id="null" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="56" y="16">null</tspan></text><text id="[[Prototype]]-Copy-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="81" y="54">[[Prototype]]</tspan></text><text id="=-Animal.prototype?" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal"><tspan x="317" y="217">= Animal.prototype?</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M305.787 232.115l1.098 1.672-117.132 76.867 3.292 5.017L177.5 317.5l7.864-13.534 3.292 5.016 117.131-76.867z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M198.5 205.5v6h107v2h-107v6l-14-7 14-7z"/><path id="Line-Copy-2" fill="#EE6B47" fill-rule="nonzero" d="M182.5 122.5l15.6 1.276-3.112 5.129 110.886 67.259-1.038 1.71-110.885-67.259-3.111 5.13-8.34-13.245z"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="509" height="435" viewBox="0 0 509 435"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="inheritance" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="instanceof.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M9 200h139v28H9z"/><text id="Animal.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="8" y="192">Animal.prototype</tspan></text><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M9 94h139v28H9z"/><text id="Object.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="8" y="86">Object.prototype</tspan></text><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M68.5 134.5l7 14h-6v28h-2v-28h-6l7-14z"/><path id="Rectangle-1-Copy" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M9 307h139v28H9z"/><text id="Rabbit.prototype" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="8" y="299">Rabbit.prototype</tspan></text><path id="Line-2-Copy" fill="#EE6B47" fill-rule="nonzero" d="M68.5 241.5l7 14h-6v28h-2v-28h-6l7-14z"/><text id="[[Prototype]]" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="80" y="266">[[Prototype]]</tspan></text><path id="Rectangle-1-Copy-2" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M9 398h139v28H9z"/><text id="rabbit" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="8" y="390">rabbit</tspan></text><path id="Line-2-Copy-2" fill="#EE6B47" fill-rule="nonzero" d="M68.5 347.5l7 14h-6v28h-2v-28h-6l7-14z"/><text id="[[Prototype]]-Copy-3" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="80" y="372">[[Prototype]]</tspan></text><text id="[[Prototype]]-Copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="80" y="159">[[Prototype]]</tspan></text><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M70.5 27.5l7 14h-6v28h-2v-28h-6l7-14z"/><text id="null" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="56" y="16">null</tspan></text><text id="[[Prototype]]-Copy-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="81" y="54">[[Prototype]]</tspan></text><text id="=-Animal.prototype?" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="16" font-weight="normal"><tspan x="317" y="217">= Animal.prototype?</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M305.787 232.115l1.098 1.672-.836.549-116.296 76.318 3.292 5.017L177.5 317.5l7.864-13.534 3.292 5.016 116.295-76.318.836-.549z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M198.5 205.5v6h107v2h-107v6l-14-7 14-7z"/><path id="Line-Copy-2" fill="#EE6B47" fill-rule="nonzero" d="M182.5 122.5l15.6 1.276-3.112 5.129 110.03 66.74.856.519-1.038 1.71-.855-.519-110.03-66.74-3.111 5.13-8.34-13.245z"/></g></g></svg>
--- a/1-js/10-error-handling/1-try-catch/try-catch-flow.svg
+++ b/1-js/10-error-handling/1-try-catch/try-catch-flow.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="514" height="411" viewBox="0 0 514 411"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="try-catch-flow.svg"><g id="Rectangle-1-+-Корень" transform="translate(207 4)"><rect id="Rectangle-1" width="78" height="28" x="1" y="1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" rx="14"/><text id="Begin" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="21" y="20">Begin</tspan></text></g><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M249 34v23.049l8 .001-9.5 19-9.5-19 8-.001V34h3z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M399 297v23.049l8 .001-9.5 19-9.5-19 8-.001V297h3z"/><path id="Path-1218" fill="#EE6B47" fill-rule="nonzero" d="M158.5 131.5v3h-59v85h8l-9.5 19-9.5-19h8v-88h62z"/><path id="Path-1218-Copy" fill="#EE6B47" fill-rule="nonzero" d="M400.5 131.5l-.001 88h8.001l-9.5 19-9.5-19h7.999l.001-85h-82v-3h85z"/><g id="Rectangle-354-+-Каково-“официальное”" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" transform="translate(154 81)"><path id="Rectangle-354" d="M2.06 52l91.55 50.856L185.161 52 93.611 1.144 2.058 52z"/></g><g id="Rectangle-356-+-Отмена" transform="translate(59 177)"><path id="Rectangle-356" fill="#FFF" d="M0 2h60v20H0z"/><text id="No-Errors" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="7.5" y="15">No Errors</tspan></text></g><g id="Rectangle-356-Copy-+-“Админ”" transform="translate(303 176)"><path id="Rectangle-356-Copy" fill="#FFF" d="M65 2h60v20H65z"/><text id="An-error-occured-in" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x=".932" y="15">An error occured in the code</tspan></text></g><rect id="Rectangle-1-Copy-2" width="214" height="49" x="292" y="349" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" rx="24.5"/><rect id="Rectangle-1" width="195" height="49" x="1" y="244" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" rx="24.5"/><rect id="Rectangle-1-Copy" width="216" height="49" x="290" y="244" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" rx="24.5"/><text id="Ignore-catch-block" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="39" y="272">Ignore catch block</tspan></text><text id="Ignore-the-rest-of-t" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="332" y="272">Ignore the rest of try</tspan></text><text id="Execute-catch-block" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="333" y="379">Execute catch block</tspan></text><text id="try-{-}" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="218" y="117">try {</tspan>    <tspan x="218" y="157">}</tspan></text><text id="//-code..." fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="232" y="138">// code...</tspan></text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="514" height="411" viewBox="0 0 514 411"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="try-catch-flow.svg"><g id="Rectangle-1-+-Корень" transform="translate(207 4)"><rect id="Rectangle-1" width="78" height="28" x="1" y="1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" rx="14"/><text id="Begin" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="21" y="20">Begin</tspan></text></g><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M249 34v23.049l8 .001-9.5 19-9.5-19 8-.001V34h3z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M399 297v23.049l8 .001-9.5 19-9.5-19 8-.001V297h3z"/><path id="Path-1218" fill="#EE6B47" fill-rule="nonzero" d="M158.5 131.5v3h-59v85h8l-9.5 19-9.5-19h8v-88h62z"/><path id="Path-1218-Copy" fill="#EE6B47" fill-rule="nonzero" d="M400.5 131.5l-.001 88h8.001l-9.5 19-9.5-19h7.999v-85H315.5v-3h85z"/><g id="Rectangle-354-+-Каково-“официальное”" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" transform="translate(154 81)"><path id="Rectangle-354" d="M2.06 52l91.55 50.856L185.161 52 93.611 1.144 2.058 52z"/></g><g id="Rectangle-356-+-Отмена" transform="translate(59 177)"><path id="Rectangle-356" fill="#FFF" d="M0 2h60v20H0z"/><text id="No-Errors" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="7.5" y="15">No Errors</tspan></text></g><g id="Rectangle-356-Copy-+-“Админ”" transform="translate(303 176)"><path id="Rectangle-356-Copy" fill="#FFF" d="M65 2h60v20H65z"/><text id="An-error-occured-in" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x=".932" y="15">An error occured in the code</tspan></text></g><rect id="Rectangle-1-Copy-2" width="214" height="49" x="292" y="349" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" rx="24.5"/><rect id="Rectangle-1" width="195" height="49" x="1" y="244" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" rx="24.5"/><rect id="Rectangle-1-Copy" width="216" height="49" x="290" y="244" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" rx="24.5"/><text id="Ignore-catch-block" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="39" y="272">Ignore catch block</tspan></text><text id="Ignore-the-rest-of-t" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="332" y="272">Ignore the rest of try</tspan></text><text id="Execute-catch-block" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="333" y="379">Execute catch block</tspan></text><text id="try-{-}" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="218" y="117">try {</tspan>    <tspan x="218" y="157">}</tspan></text><text id="//-code..." fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="232" y="138">// code...</tspan></text></g></g></svg>
--- a/1-js/11-async/02-promise-basics/article.md
+++ b/1-js/11-async/02-promise-basics/article.md
@ -205,7 +205,7 @@ let promise = new Promise((resolve, reject) => {
 });

 *!*
-// .catch(f) is the same as promise.then(null, f)
+// .catch(f) is the same as .then(null, f)
 promise.catch(alert); // shows "Error: Whoops!" after 1 second
 */!*
 ```
--- a/1-js/11-async/02-promise-basics/promise-resolve-reject.svg
+++ b/1-js/11-async/02-promise-basics/promise-resolve-reject.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="512" height="246" viewBox="0 0 512 246"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="promise" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="promise-resolve-reject.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M1 91h182v70H1z"/><text id="new-Promise(executor" fill="#707175" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="2" y="82">new Promise(executor)</tspan></text><text id="state:-&quot;pending&quot;-res" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="13" y="115.432">state: &quot;pending&quot;</tspan> <tspan x="13" y="135.432">result: undefined</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M196.51 134.673l104.192 47.993 2.51-5.45L313 189.433l-15.644.5 2.509-5.45-104.192-47.992.837-1.817z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M297.38 56L313 57l-10.173 11.896-2.335-5.527-104.024 43.941-.778-1.842 104.024-43.942-2.334-5.527z"/><text id="resolve(value)" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" transform="rotate(-23 244.39 72.63)"><tspan x="185.59" y="77.13">resolve(value)</tspan></text><text id="reject(error)" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" transform="rotate(25 251.634 150.64)"><tspan x="197.034" y="155.141">reject(error)</tspan></text><path id="Rectangle-1-Copy" fill="#FFF9EB" stroke="#7ED321" stroke-width="2" d="M323 10h182v64H323z"/><text id="state:-&quot;fulfilled&quot;-r" fill="#417505" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="338" y="34.432">state: &quot;fulfilled&quot;</tspan> <tspan x="338" y="54.432">result: value</tspan></text><path id="Rectangle-1-Copy-3" fill="#FCDFE1" stroke="#C74A6C" stroke-width="2" d="M323 177h182v64H323z"/><text id="state:-&quot;rejected&quot;-re" fill="#727155" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="338" y="201.432">state: &quot;rejected&quot;</tspan> <tspan x="338" y="221.432">result: error</tspan></text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="246" viewBox="0 0 512 246"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="promise" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="promise-resolve-reject.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M1 91h182v70H1z"/><text id="new-Promise(executor" fill="#707175" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="2" y="82">new Promise(executor)</tspan></text><text id="state:-&quot;pending&quot;-res" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="13" y="115.432">state: &quot;pending&quot;</tspan> <tspan x="13" y="135.432">result: undefined</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M196.51 134.673l.908.419 103.284 47.574 2.51-5.45L313 189.433l-15.644.5 2.509-5.45-103.283-47.574-.909-.418.837-1.817z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M297.38 56L313 57l-10.173 11.896-2.335-5.528-103.103 43.553-.921.39-.778-1.843.92-.39 103.104-43.552-2.334-5.527z"/><text id="resolve(value)" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" transform="rotate(-23 244.39 72.63)"><tspan x="185.59" y="77.13">resolve(value)</tspan></text><text id="reject(error)" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal" transform="rotate(25 251.634 150.64)"><tspan x="197.034" y="155.141">reject(error)</tspan></text><path id="Rectangle-1-Copy" fill="#FFF9EB" stroke="#7ED321" stroke-width="2" d="M323 10h182v64H323z"/><text id="state:-&quot;fulfilled&quot;-r" fill="#417505" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="338" y="34.432">state: &quot;fulfilled&quot;</tspan> <tspan x="338" y="54.432">result: value</tspan></text><path id="Rectangle-1-Copy-3" fill="#FCDFE1" stroke="#C74A6C" stroke-width="2" d="M323 177h182v64H323z"/><text id="state:-&quot;rejected&quot;-re" fill="#727155" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="338" y="201.432">state: &quot;rejected&quot;</tspan> <tspan x="338" y="221.432">result: error</tspan></text></g></g></svg>
--- a/1-js/11-async/03-promise-chaining/promise-handler-variants.svg
+++ b/1-js/11-async/03-promise-chaining/promise-handler-variants.svg
--- a/1-js/11-async/03-promise-chaining/promise-then-many.svg
+++ b/1-js/11-async/03-promise-chaining/promise-then-many.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="373" height="152" viewBox="0 0 373 152"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="promise" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="promise-then-many.svg"><path id="Rectangle-1-Copy-3" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M10 120h108v28H10z"/><text id=".then" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="42.5" y="139">.then</tspan></text><path id="Rectangle-1-Copy-8" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M131 4h108v28H131z"/><text id="new-Promise" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="138.3" y="22">new Promise</tspan></text><text id="resolve(1)" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="142" y="54">resolve(1)</tspan></text><path id="Line-Copy-8" fill="#EE6B47" fill-rule="nonzero" d="M186 71v22h6l-7 14-7-14h6V71h2z"/><path id="Rectangle-1-Copy-4" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M131 120h108v28H131z"/><text id=".then-copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="164" y="139">.then</tspan></text><path id="Line-Copy-9" fill="#EE6B47" fill-rule="nonzero" d="M113.746 70.107l1.147 1.639L75.542 99.29l3.441 4.916L63.5 106.5l7.455-13.763 3.44 4.914 39.35-27.544z"/><path id="Rectangle-1-Copy-5" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M255 120h108v28H255z"/><text id=".then-copy-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="287.5" y="139">.then</tspan></text><path id="Line-Copy-10" fill="#EE6B47" fill-rule="nonzero" d="M257.835 67.595L295.13 97.04l3.718-4.71 6.651 14.17-15.326-3.18 3.718-4.711-37.297-29.444 1.24-1.57z"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="373" height="152" viewBox="0 0 373 152"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="promise" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="promise-then-many.svg"><path id="Rectangle-1-Copy-3" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M10 120h108v28H10z"/><text id=".then" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="42.5" y="139">.then</tspan></text><path id="Rectangle-1-Copy-8" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M131 4h108v28H131z"/><text id="new-Promise" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="138.3" y="22">new Promise</tspan></text><text id="resolve(1)" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="142" y="54">resolve(1)</tspan></text><path id="Line-Copy-8" fill="#EE6B47" fill-rule="nonzero" d="M186 71v22h6l-7 14-7-14h6V71h2z"/><path id="Rectangle-1-Copy-4" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M131 120h108v28H131z"/><text id=".then-copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="164" y="139">.then</tspan></text><path id="Line-Copy-9" fill="#EE6B47" fill-rule="nonzero" d="M113.746 70.107l1.147 1.639-.82.573L75.542 99.29l3.441 4.916L63.5 106.5l7.455-13.763 3.441 4.915 38.53-26.971.82-.574z"/><path id="Rectangle-1-Copy-5" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M255 120h108v28H255z"/><text id=".then-copy-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="287.5" y="139">.then</tspan></text><path id="Line-Copy-10" fill="#EE6B47" fill-rule="nonzero" d="M257.835 67.595l.785.62L295.13 97.04l3.718-4.71 6.651 14.17-15.326-3.18 3.718-4.711-36.512-28.824-.785-.62 1.24-1.57z"/></g></g></svg>
--- a/1-js/11-async/04-promise-error-handling/promise-then-many.svg
+++ b/1-js/11-async/04-promise-error-handling/promise-then-many.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="373" height="152" viewBox="0 0 373 152"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="promise" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="promise-then-many.svg"><path id="Rectangle-1-Copy-3" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M10 120h108v28H10z"/><text id=".then" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="42.5" y="139">.then</tspan></text><path id="Rectangle-1-Copy-8" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M131 4h108v28H131z"/><text id="new-Promise" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="138.3" y="22">new Promise</tspan></text><text id="resolve(1)" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="142" y="54">resolve(1)</tspan></text><path id="Line-Copy-8" fill="#EE6B47" fill-rule="nonzero" d="M186 71v22h6l-7 14-7-14h6V71h2z"/><path id="Rectangle-1-Copy-4" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M131 120h108v28H131z"/><text id=".then-copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="164" y="139">.then</tspan></text><path id="Line-Copy-9" fill="#EE6B47" fill-rule="nonzero" d="M113.746 70.107l1.147 1.639L75.542 99.29l3.441 4.916L63.5 106.5l7.455-13.763 3.44 4.914 39.35-27.544z"/><path id="Rectangle-1-Copy-5" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M255 120h108v28H255z"/><text id=".then-copy-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="287.5" y="139">.then</tspan></text><path id="Line-Copy-10" fill="#EE6B47" fill-rule="nonzero" d="M257.835 67.595L295.13 97.04l3.718-4.71 6.651 14.17-15.326-3.18 3.718-4.711-37.297-29.444 1.24-1.57z"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="373" height="152" viewBox="0 0 373 152"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="promise" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="promise-then-many.svg"><path id="Rectangle-1-Copy-3" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M10 120h108v28H10z"/><text id=".then" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="42.5" y="139">.then</tspan></text><path id="Rectangle-1-Copy-8" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M131 4h108v28H131z"/><text id="new-Promise" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="138.3" y="22">new Promise</tspan></text><text id="resolve(1)" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="142" y="54">resolve(1)</tspan></text><path id="Line-Copy-8" fill="#EE6B47" fill-rule="nonzero" d="M186 71v22h6l-7 14-7-14h6V71h2z"/><path id="Rectangle-1-Copy-4" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M131 120h108v28H131z"/><text id=".then-copy" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="164" y="139">.then</tspan></text><path id="Line-Copy-9" fill="#EE6B47" fill-rule="nonzero" d="M113.746 70.107l1.147 1.639-.82.573L75.542 99.29l3.441 4.916L63.5 106.5l7.455-13.763 3.441 4.915 38.53-26.971.82-.574z"/><path id="Rectangle-1-Copy-5" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M255 120h108v28H255z"/><text id=".then-copy-2" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="287.5" y="139">.then</tspan></text><path id="Line-Copy-10" fill="#EE6B47" fill-rule="nonzero" d="M257.835 67.595l.785.62L295.13 97.04l3.718-4.71 6.651 14.17-15.326-3.18 3.718-4.711-36.512-28.824-.785-.62 1.24-1.57z"/></g></g></svg>
--- a/1-js/12-generators-iterators/1-generators/genYield2-2.svg
+++ b/1-js/12-generators-iterators/1-generators/genYield2-2.svg
--- a/1-js/13-modules/02-import-export/article.md
+++ b/1-js/13-modules/02-import-export/article.md
@ -26,7 +26,7 @@ For instance, here all exports are valid:
 ```

 ````smart header="No semicolons after export class/function"
-Please note that `export` before a class or a function does not make it a [function expression](info:function-expressions-arrows). It's still a function declaration, albeit exported.
+Please note that `export` before a class or a function does not make it a [function expression](info:function-expressions). It's still a function declaration, albeit exported.

 Most JavaScript style guides don't recommend semicolons after function and class declarations.

--- a/2-ui/1-document/01-browser-environment/windowObjects.svg
+++ b/2-ui/1-document/01-browser-environment/windowObjects.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="367" height="308" viewBox="0 0 367 308"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="windowObjects.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M136 10h78v28h-78z"/><text id="window" fill="#707175" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="152" y="28">window</tspan></text><path id="Rectangle-2" fill="#F5F4D8" stroke="#CFCE95" stroke-width="2" d="M18 80h78v26H18z"/><path id="Rectangle-2" fill="#FCDFE1" stroke="#C74A6C" stroke-width="2" d="M255 118h83v26h-83z"/><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M110 270h132v26H110z"/><text id="document" fill="#727155" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="26" y="97">document</tspan></text><path id="Rectangle-2" fill="#FCDFE1" stroke="#C74A6C" stroke-width="2" d="M255 80h83v26h-83z"/><text id="Object" fill="#924565" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="271" y="97">Object</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 80h85v26h-85z"/><text id="navigator" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="138" y="97">navigator</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 118h85v26h-85z"/><text id="screen" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="151" y="135">screen</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 156h85v26h-85z"/><text id="location" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="142" y="173">location</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 194h85v26h-85z"/><text id="frames" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="151" y="211">frames</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 232h85v26h-85z"/><text id="history" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="147" y="249">history</tspan></text><text id="Array" fill="#924565" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="275" y="135">Array</tspan></text><path id="Rectangle-3" fill="#FCDFE1" stroke="#C74A6C" stroke-width="2" d="M255 156h83v26h-83z"/><text id="Function" fill="#924565" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="264" y="173">Function</tspan></text><text id="XMLHttpRequest" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="117" y="287">XMLHttpRequest</tspan></text><text id="BOM" fill="#99C0C3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="135" y="73">BOM</tspan></text><text id="JavaScript" fill="#C74A6C" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="271" y="73">JavaScript</tspan></text><text id="DOM" fill="#CFCE95" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="17" y="73">DOM</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M177.5 40.5v18h6l-7 14-7-14h6v-18h2z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M132.75 40.108l1.142 1.642-35.328 24.575 3.426 4.926L86.5 73.5l7.495-13.741 3.426 4.925 35.329-24.576z"/><text id="…" fill="#727155" font-family="PTMono-Regular, PT Mono" font-size="24" font-weight="normal"><tspan x="50" y="122">…</tspan></text><text id="…-2" fill="#924565" font-family="PTMono-Regular, PT Mono" font-size="24" font-weight="normal"><tspan x="287" y="201">…</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M217.226 39.097l39.27 26.715 3.376-4.96 7.638 13.662-15.513-2.087 3.374-4.962-39.27-26.715 1.125-1.653z"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="367" height="308" viewBox="0 0 367 308"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="combined" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="windowObjects.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M136 10h78v28h-78z"/><text id="window" fill="#707175" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="152" y="28">window</tspan></text><path id="Rectangle-2" fill="#F5F4D8" stroke="#CFCE95" stroke-width="2" d="M18 80h78v26H18z"/><path id="Rectangle-2" fill="#FCDFE1" stroke="#C74A6C" stroke-width="2" d="M255 118h83v26h-83z"/><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M110 270h132v26H110z"/><text id="document" fill="#727155" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="26" y="97">document</tspan></text><path id="Rectangle-2" fill="#FCDFE1" stroke="#C74A6C" stroke-width="2" d="M255 80h83v26h-83z"/><text id="Object" fill="#924565" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="271" y="97">Object</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 80h85v26h-85z"/><text id="navigator" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="138" y="97">navigator</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 118h85v26h-85z"/><text id="screen" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="151" y="135">screen</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 156h85v26h-85z"/><text id="location" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="142" y="173">location</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 194h85v26h-85z"/><text id="frames" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="151" y="211">frames</tspan></text><path id="Rectangle-2" fill="#EDFCFD" stroke="#99C0C3" stroke-width="2" d="M134 232h85v26h-85z"/><text id="history" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="147" y="249">history</tspan></text><text id="Array" fill="#924565" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="275" y="135">Array</tspan></text><path id="Rectangle-3" fill="#FCDFE1" stroke="#C74A6C" stroke-width="2" d="M255 156h83v26h-83z"/><text id="Function" fill="#924565" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="264" y="173">Function</tspan></text><text id="XMLHttpRequest" fill="#366378" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="117" y="287">XMLHttpRequest</tspan></text><text id="BOM" fill="#99C0C3" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="135" y="73">BOM</tspan></text><text id="JavaScript" fill="#C74A6C" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="271" y="73">JavaScript</tspan></text><text id="DOM" fill="#CFCE95" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="17" y="73">DOM</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M177.5 40.5v18h6l-7 14-7-14h6v-18h2z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M132.75 40.108l1.142 1.642-.82.57-34.508 24.005 3.426 4.926L86.5 73.5l7.495-13.741 3.426 4.924 34.508-24.004.82-.571z"/><text id="…" fill="#727155" font-family="PTMono-Regular, PT Mono" font-size="24" font-weight="normal"><tspan x="50" y="122">…</tspan></text><text id="…-2" fill="#924565" font-family="PTMono-Regular, PT Mono" font-size="24" font-weight="normal"><tspan x="287" y="201">…</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M217.226 39.097l.827.562 38.443 26.152 3.376-4.96 7.638 13.663-15.513-2.087 3.374-4.962-38.443-26.152-.827-.563 1.125-1.653z"/></g></g></svg>
--- a/2-ui/1-document/03-dom-navigation/dom-links-elements.svg
+++ b/2-ui/1-document/03-dom-navigation/dom-links-elements.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="440" height="316" viewBox="0 0 440 316"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="dom-links-elements.svg"><path id="Rectangle-8" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M129 10h198v28H129z"/><text id="document.documentEle" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="142.6" y="29">document.documentElement </tspan></text><text id="Type-something" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="336.9" y="29">&lt;HTML&gt;</tspan></text><path id="Rectangle-7" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M163 78h117v28H163z"/><text id="document.body--" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="174.2" y="95">document.body </tspan></text><text id="(if-inside-body)" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="300.9" y="95">(if inside body)</tspan></text><path id="Line-5" stroke="#8A704D" stroke-linecap="square" stroke-width="2" d="M14.5 115H427"/><text id="parentElement" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="175" y="172" fill="#8A704D">parent</tspan> <tspan x="218.2" y="172" fill="#EE6B47">Element</tspan></text><path id="Rectangle-6" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M180 213h80v28h-80z"/><text id="&lt;DIV&gt;" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="12" font-weight="normal"><tspan x="204.192" y="232">&lt;DIV&gt;</tspan></text><path id="Line-6" fill="#EE6B47" fill-rule="nonzero" d="M220.5 178.71l8.112 14.421-1.743.98-5.369-9.543V208.5h-2v-23.935l-5.369 9.547-1.743-.98 8.112-14.422z"/><path id="Line-7" fill="#EE6B47" fill-rule="nonzero" d="M415.369 218.388l14.42 8.112-14.42 8.112-.98-1.743 9.542-5.369H266.5v-2h157.434l-9.546-5.369.98-1.743z"/><text id="nextElementSibling" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="276" y="212" fill="#8A704D">next</tspan> <tspan x="304.8" y="212" fill="#EE6B47">Element</tspan> <tspan x="355.2" y="212" fill="#8A704D">Sibling</tspan></text><path id="Line-8" fill="#EE6B47" fill-rule="nonzero" d="M23.631 218.388l.98 1.743-9.544 5.369H169v2H15.067l9.545 5.369-.98 1.743L9.21 226.5l14.421-8.112z"/><text id="previousElementSibli" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="6" y="212" fill="#8A704D">previous</tspan> <tspan x="63.6" y="212" fill="#EE6B47">Element</tspan> <tspan x="114" y="212" fill="#8A704D">Sibling</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M174.822 248.123l1.055 1.7-56.244 34.908 10.941-.47.086 1.997-16.53.713 7.975-14.497 1.752.964-5.279 9.595 56.244-34.91z"/><path id="Line-3" fill="#EE6B47" fill-rule="nonzero" d="M269.214 248.115l53.772 35.364-5.024-9.73 1.777-.918 7.592 14.702-16.506-1.147.138-1.995 10.924.759-53.772-35.364 1.099-1.671z"/><text id="children" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="188" y="273">children</tspan></text><text id="firstElementChild--" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="43" y="307" fill="#8A704D">first</tspan> <tspan x="79" y="307" fill="#EE6B47">Element</tspan> <tspan x="129.4" y="307" fill="#8A704D">Child </tspan></text><text id="lastElementChild" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="273" y="307" fill="#8A704D">last</tspan> <tspan x="301.8" y="307" fill="#EE6B47">Element</tspan> <tspan x="352.2" y="307" fill="#8A704D">Child</tspan></text><path id="Line-Copy-2" fill="#EE6B47" fill-rule="nonzero" d="M222.5 151.5v4h-2v-4h2zm0-6v4h-2v-4h2zm0-6v4h-2v-4h2zm-1-14.29l8.112 14.421-1.743.98-5.37-9.544.001.433h-2l-.001-.433-5.368 9.545-1.743-.98 8.112-14.422zm1 8.29v4h-2v-4h2z"/><path id="Line-2-Copy" fill="#EE6B47" fill-rule="nonzero" d="M221.5 44.71l8.112 14.421-1.743.98-5.369-9.544v21.528h-2V50.567l-5.369 9.545-1.743-.98L221.5 44.71z"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="440" height="316" viewBox="0 0 440 316"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="dom-links-elements.svg"><path id="Rectangle-8" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M129 10h198v28H129z"/><text id="document.documentEle" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="142.6" y="29">document.documentElement </tspan></text><text id="Type-something" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="336.9" y="29">&lt;HTML&gt;</tspan></text><path id="Rectangle-7" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M163 78h117v28H163z"/><text id="document.body--" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="174.2" y="95">document.body </tspan></text><text id="(if-inside-body)" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="300.9" y="95">(if inside body)</tspan></text><path id="Line-5" stroke="#8A704D" stroke-linecap="square" stroke-width="2" d="M14.5 115H427"/><text id="parentElement" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="175" y="172" fill="#8A704D">parent</tspan> <tspan x="218.2" y="172" fill="#EE6B47">Element</tspan></text><path id="Rectangle-6" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M180 213h80v28h-80z"/><text id="&lt;DIV&gt;" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="12" font-weight="normal"><tspan x="204.192" y="232">&lt;DIV&gt;</tspan></text><path id="Line-6" fill="#EE6B47" fill-rule="nonzero" d="M220.5 178.71l.872 1.55 6.75 12 .49.871-1.743.98-.49-.87-4.879-8.674V208.5h-2v-23.933l-4.878 8.673-.49.872-1.744-.98.49-.872 6.75-12 .872-1.55z"/><path id="Line-7" fill="#EE6B47" fill-rule="nonzero" d="M415.369 218.388l.871.49 12 6.75 1.55.872-1.55.872-12 6.75-.871.49-.98-1.743.87-.49 8.673-4.879H266.5v-2h157.432l-8.672-4.878-.872-.49.98-1.744z"/><text id="nextElementSibling" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="276" y="212" fill="#8A704D">next</tspan> <tspan x="304.8" y="212" fill="#EE6B47">Element</tspan> <tspan x="355.2" y="212" fill="#8A704D">Sibling</tspan></text><path id="Line-8" fill="#EE6B47" fill-rule="nonzero" d="M23.631 218.388l.98 1.743-.87.49-8.674 4.879H169v2H15.067l8.673 4.878.872.49-.98 1.744-.872-.49-12-6.75-1.55-.872 1.55-.872 12-6.75.871-.49z"/><text id="previousElementSibli" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="6" y="212" fill="#8A704D">previous</tspan> <tspan x="63.6" y="212" fill="#EE6B47">Element</tspan> <tspan x="114" y="212" fill="#8A704D">Sibling</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M174.822 248.123l1.055 1.7-.85.527-48.476 30.089-6.917 4.292 9.941-.428 1-.043.085 1.998-.999.043-13.755.594-1.776.076.857-1.557 6.636-12.064.482-.876 1.752.964-.482.876-4.797 8.718 6.918-4.293 48.477-30.089.85-.527z"/><path id="Line-3" fill="#EE6B47" fill-rule="nonzero" d="M269.214 248.115l.835.55 46.157 30.354 6.78 4.46-4.565-8.841-.459-.889 1.777-.918.459.889 6.317 12.233.816 1.58-1.774-.123-13.735-.954-.997-.07.138-1.995.998.07 9.926.689-6.78-4.46-46.156-30.354-.836-.55 1.099-1.671z"/><text id="children" fill="#EE6B47" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="188" y="273">children</tspan></text><text id="firstElementChild--" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="43" y="307" fill="#8A704D">first</tspan> <tspan x="79" y="307" fill="#EE6B47">Element</tspan> <tspan x="129.4" y="307" fill="#8A704D">Child </tspan></text><text id="lastElementChild" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="273" y="307" fill="#8A704D">last</tspan> <tspan x="301.8" y="307" fill="#EE6B47">Element</tspan> <tspan x="352.2" y="307" fill="#8A704D">Child</tspan></text><path id="Line-Copy-2" fill="#EE6B47" fill-rule="nonzero" d="M222.5 151.5v4h-2v-4h2zm0-6v4h-2v-4h2zm0-6v4h-2v-4h2zm-1-14.29l.872 1.55 6.75 12 .49.871-1.743.98-.49-.87-4.88-8.676.001.435h-2l-.001-.432-4.877 8.672-.49.872-1.744-.98.49-.872 6.75-12 .872-1.55zm1 8.29v4h-2v-4h2z"/><path id="Line-2-Copy" fill="#EE6B47" fill-rule="nonzero" d="M221.5 44.71l.872 1.55 6.75 12 .49.871-1.743.98-.49-.87-4.879-8.674v21.528h-2V50.567l-4.878 8.673-.49.872-1.744-.98.49-.872 6.75-12 .872-1.55z"/></g></g></svg>
--- a/2-ui/1-document/03-dom-navigation/dom-links.svg
+++ b/2-ui/1-document/03-dom-navigation/dom-links.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="420" height="388" viewBox="0 0 420 388"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="dom-links.svg"><path id="Rectangle-9" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M150 20h117v28H150z"/><path id="Rectangle-7" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M151 154h117v28H151z"/><path id="Rectangle-8" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M117 87h198v28H117z"/><text id="document" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="179.7" y="38">document</tspan></text><text id="document.documentEle" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="129.6" y="105">document.documentElement </tspan></text><text id="Type-something" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="324.9" y="105">&lt;HTML&gt;</tspan></text><text id="document.body--" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="164.2" y="173">document.body </tspan></text><text id="(if-inside-body)" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="283.9" y="173">(if inside body)</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M209.5 119.71l8.112 14.421-1.743.98-5.369-9.544v23.785h-2v-23.785l-5.369 9.545-1.743-.98 8.112-14.422z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M209.5 52.71l8.112 14.421-1.743.98-5.369-9.543v21.527h-2v-21.53l-5.369 9.547-1.743-.98L209.5 52.71z"/><path id="Line" stroke="#8A704D" stroke-linecap="square" stroke-width="2" d="M2.5 191H415"/><text id="parentNode" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="172" y="248">parentNode</tspan></text><path id="Rectangle-6" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M169 289h80v28h-80z"/><text id="&lt;DIV&gt;" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="12" font-weight="normal"><tspan x="192.192" y="308">&lt;DIV&gt;</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M208.5 254.21l8.112 14.421-1.743.98-5.37-9.546.001 24.435h-2l-.001-24.432-5.368 9.544-1.743-.98 8.112-14.422z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M209.5 226.5v4h-2v-4h2zm0-6v4h-2v-4h2zm0-6v4h-2v-4h2zm-1-14.29l8.112 14.421-1.743.98-5.37-9.544.001.433h-2l-.001-.433-5.368 9.545-1.743-.98 8.112-14.422zm1 8.29v4h-2v-4h2z"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M356.369 294.388l14.42 8.112-14.42 8.112-.98-1.743 9.543-5.369H254.5v-2h110.432l-9.544-5.369.98-1.743z"/><text id="nextSibling" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="264" y="288">nextSibling</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M61.631 294.388l.98 1.743-9.544 5.369H165.5v2H53.067l9.545 5.369-.98 1.743L47.21 302.5l14.421-8.112z"/><text id="previousSibling" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="50" y="288">previousSibling</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M162.822 324.123l1.055 1.7-56.244 34.908 10.941-.47.086 1.997-16.53.713 7.975-14.497 1.752.964-5.279 9.595 56.244-34.91z"/><path id="Line-3" fill="#EE6B47" fill-rule="nonzero" d="M257.214 324.115l53.772 35.364-5.024-9.73 1.777-.918 7.592 14.702-16.506-1.147.138-1.995 10.924.759-53.772-35.364 1.099-1.671z"/><text id="childNodes" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="170" y="343">childNodes</tspan></text><text id="firstChild--" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="64" y="379">firstChild </tspan></text><text id="Type-something" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="279" y="379">lastChild</tspan></text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="420" height="388" viewBox="0 0 420 388"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="dom-links.svg"><path id="Rectangle-9" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M150 20h117v28H150z"/><path id="Rectangle-7" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M151 154h117v28H151z"/><path id="Rectangle-8" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M117 87h198v28H117z"/><text id="document" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="179.7" y="38">document</tspan></text><text id="document.documentEle" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="129.6" y="105">document.documentElement </tspan></text><text id="Type-something" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="324.9" y="105">&lt;HTML&gt;</tspan></text><text id="document.body--" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="164.2" y="173">document.body </tspan></text><text id="(if-inside-body)" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="283.9" y="173">(if inside body)</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M209.5 119.71l.872 1.55 6.75 12 .49.871-1.743.98-.49-.87-4.879-8.674v23.785h-2v-23.785l-4.878 8.673-.49.872-1.744-.98.49-.872 6.75-12 .872-1.55z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M209.5 52.71l.872 1.55 6.75 12 .49.871-1.743.98-.49-.87-4.879-8.674v21.528h-2V58.567l-4.878 8.673-.49.872-1.744-.98.49-.872 6.75-12 .872-1.55z"/><path id="Line" stroke="#8A704D" stroke-linecap="square" stroke-width="2" d="M2.5 191H415"/><text id="parentNode" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="172" y="248">parentNode</tspan></text><path id="Rectangle-6" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M169 289h80v28h-80z"/><text id="&lt;DIV&gt;" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="12" font-weight="normal"><tspan x="192.192" y="308">&lt;DIV&gt;</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M208.5 254.21l.872 1.55 6.75 12 .49.871-1.743.98-.49-.87-4.88-8.676.001 8.185v16.25h-2v-16.25l-.001-8.182-4.877 8.672-.49.872-1.744-.98.49-.872 6.75-12 .872-1.55z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M209.5 226.5v4h-2v-4h2zm0-6v4h-2v-4h2zm0-6v4h-2v-4h2zm-1-14.29l.872 1.55 6.75 12 .49.871-1.743.98-.49-.87-4.88-8.676.001.435h-2l-.001-.432-4.877 8.672-.49.872-1.744-.98.49-.872 6.75-12 .872-1.55zm1 8.29v4h-2v-4h2z"/><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M356.369 294.388l.871.49 12 6.75 1.55.872-1.55.872-12 6.75-.871.49-.98-1.743.87-.49 8.673-4.879H254.5v-2h110.432l-8.672-4.878-.872-.49.98-1.744z"/><text id="nextSibling" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="264" y="288">nextSibling</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M61.631 294.388l.98 1.743-.87.49-8.674 4.879H165.5v2H53.067l8.673 4.878.872.49-.98 1.744-.872-.49-12-6.75-1.55-.872 1.55-.872 12-6.75.871-.49z"/><text id="previousSibling" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="50" y="288">previousSibling</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M162.822 324.123l1.055 1.7-.85.527-48.476 30.089-6.917 4.292 9.941-.428 1-.043.085 1.998-.999.043-13.755.594-1.776.076.857-1.557 6.636-12.064.482-.876 1.752.964-.482.876-4.797 8.718 6.918-4.293 48.477-30.089.85-.527z"/><path id="Line-3" fill="#EE6B47" fill-rule="nonzero" d="M257.214 324.115l.835.55 46.157 30.354 6.78 4.46-4.565-8.841-.459-.889 1.777-.918.459.889 6.317 12.233.816 1.58-1.774-.123-13.735-.954-.997-.07.138-1.995.998.07 9.926.689-6.78-4.46-46.156-30.354-.836-.55 1.099-1.671z"/><text id="childNodes" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="170" y="343">childNodes</tspan></text><text id="firstChild--" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="64" y="379">firstChild </tspan></text><text id="Type-something" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="12" font-weight="normal"><tspan x="279" y="379">lastChild</tspan></text></g></g></svg>
--- a/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy.svg
+++ b/2-ui/1-document/05-basic-dom-node-properties/dom-class-hierarchy.svg
--- a/2-ui/1-document/07-modifying-document/article.md
+++ b/2-ui/1-document/07-modifying-document/article.md
@ -540,7 +540,7 @@ So if we need to add a lot of text into HTML dynamically, and we're at page load
    - `"beforeend"` -- insert `html` into `elem`, at the end,
    - `"afterend"` -- insert `html` right after `elem`.

-    Also there are also similar methods, `elem.insertAdjacentText` and `elem.insertAdjacentElement`, that insert text strings and elements, but they are rarely used.
+    Also there are similar methods, `elem.insertAdjacentText` and `elem.insertAdjacentElement`, that insert text strings and elements, but they are rarely used.

 - To append HTML to the page before it has finished loading:
    - `document.write(html)`
--- a/2-ui/1-document/07-modifying-document/before-prepend-append-after.svg
+++ b/2-ui/1-document/07-modifying-document/before-prepend-append-after.svg
--- a/2-ui/1-document/07-modifying-document/insert-adjacent.svg
+++ b/2-ui/1-document/07-modifying-document/insert-adjacent.svg
--- a/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.svg
+++ b/2-ui/1-document/09-size-and-scroll/4-put-ball-in-center/field.svg
--- a/2-ui/1-document/09-size-and-scroll/metric-all.svg
+++ b/2-ui/1-document/09-size-and-scroll/metric-all.svg
--- a/2-ui/1-document/10-size-and-scroll-window/article.md
+++ b/2-ui/1-document/10-size-and-scroll-window/article.md
@ -40,7 +40,7 @@ In modern HTML we should always write `DOCTYPE`.

 ## Width/height of the document

-Theoretically, as the root document element is `documentElement.clientWidth/Height`, and it encloses all the content, we could measure document full size as `documentElement.scrollWidth/scrollHeight`.
+Theoretically, as the root document element is `document.documentElement`, and it encloses all the content, we could measure document full size as `document.documentElement.scrollWidth/scrollHeight`.

 But on that element, for the whole page, these properties do not work as intended. In Chrome/Safari/Opera if there's no scroll, then `documentElement.scrollHeight` may be even less than  `documentElement.clientHeight`! Sounds like a nonsense, weird, right?

@ -62,7 +62,7 @@ Why so? Better don't ask. These inconsistencies come from ancient times, not a "

 DOM elements have their current scroll state in `elem.scrollLeft/scrollTop`.

-For document scroll `document.documentElement.scrollLeft/Top` works in most browsers, except oldler WebKit-based ones, like Safari (bug [5991](https://bugs.webkit.org/show_bug.cgi?id=5991)), where we should use `document.body` instead of `document.documentElement`.
+For document scroll `document.documentElement.scrollLeft/Top` works in most browsers, except older WebKit-based ones, like Safari (bug [5991](https://bugs.webkit.org/show_bug.cgi?id=5991)), where we should use `document.body` instead of `document.documentElement`.

 Luckily, we don't have to remember these peculiarities at all, because the scroll is available in the special properties `window.pageXOffset/pageYOffset`:

--- a/2-ui/1-document/11-coordinates/article.md
+++ b/2-ui/1-document/11-coordinates/article.md
@ -77,15 +77,15 @@ Mathematically, a rectangle is uniquely defined with its starting point `(x,y)`

 Technically it's possible for `width/height` to be negative, that allows for "directed" rectangle, e.g. to represent mouse selection with properly marked start and end.

+Negative `width/height` values mean that the rectangle starts at its bottom-right corner and then "grows" left-upwards.
+
 Here's a rectangle with negative `width` and `height` (e.g. `width=-200`, `height=-100`):

 ![](coordinates-negative.svg)

-The rectangle starts at its bottom-right corner and then spans left/up, as negative `width/height` lead it backwards by coordinates.
+As you can see, `left/top` do not equal `x/y` in such case.

-As you can see, `left/top` are not `x/y` here. So these are actually not duplicates. Their formula can be adjusted to cover negative `width/height`, that's simple enough, but rarely needed, as the result of `elem.getBoundingClientRect()` always has positive width/height.
-
-Here we mention negative `width/height` only for you to understand why these seemingly duplicate properties are not actually duplicates.
+In practice though, `elem.getBoundingClientRect()` always returns positive width/height, here we mention negative `width/height` only for you to understand why these seemingly duplicate properties are not actually duplicates.
 ```

 ```warn header="Internet Explorer and Edge: no support for `x/y`"
--- a/2-ui/1-document/11-coordinates/coordinates-negative.svg
+++ b/2-ui/1-document/11-coordinates/coordinates-negative.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="521" height="355" viewBox="0 0 521 355"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><defs><filter id="filter-1" width="118%" height="209.1%" x="-9%" y="-54.5%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceGraphic" stdDeviation="4"/></filter></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="coordinates-negative.svg"><g id="noun_69008_cc" fill="#E8C48E" transform="translate(13 11)"><path id="Shape" d="M455.313 330H9.688C4.34 330 0 326.288 0 321.75V8.25C0 3.713 4.34 0 9.688 0h445.625C460.64 0 465 3.712 465 8.25v313.5c0 4.538-4.36 8.25-9.688 8.25zM9.432 318.939h444.25V11.06H9.432V318.94z"/><path id="Shape" d="M19.674 46C14.334 46 10 44.875 10 43.5s4.334-2.5 9.674-2.5h425.652c5.32 0 9.674 1.125 9.674 2.5s-4.353 2.5-9.674 2.5H19.674zM31 27.5c0 3.039-2.461 5.5-5.5 5.5a5.498 5.498 0 01-5.5-5.5c0-3.039 2.461-5.5 5.5-5.5s5.5 2.461 5.5 5.5zM59 27.5c0 3.039-2.461 5.5-5.5 5.5a5.498 5.498 0 01-5.5-5.5c0-3.039 2.461-5.5 5.5-5.5s5.5 2.461 5.5 5.5zM87 27.5c0 3.039-2.461 5.5-5.5 5.5a5.498 5.498 0 01-5.5-5.5c0-3.039 2.461-5.5 5.5-5.5s5.5 2.461 5.5 5.5z"/></g><text id="bottom" fill="#999" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="414" y="196">bottom</tspan></text><path id="Line-30-Copy-2" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M392.5 290v37"/><path id="Line-29-Copy" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M394 288h69"/><text id="(x,y)" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="395" y="305">(x,y)</tspan></text><text id="(x,y)-copy" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="395" y="305">(x,y)</tspan></text><text id="left" fill="#999" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="50" y="129">left</tspan></text><path id="Line-Copy" fill="#999" fill-rule="nonzero" d="M410 56.5v213h8l-9.5 19-9.5-19h8v-213h3z"/><text id="right" fill="#999" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="188" y="323">right</tspan></text><path id="Line-3-Copy-2" fill="#999" fill-rule="nonzero" d="M371.498 295.5l19 9.5-19 9.5-.001-8H21.502v-3h349.995v-8z"/><path id="Rectangle-1" fill="#E8C48F" fill-opacity=".88" d="M393 113v175H118V113h275zm-10.643 10H129.015v155h253.342V123z"/><text id="Introduction-This-Ec" fill="#5A4739" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" opacity=".7"><tspan x="139" y="148">Introduction</tspan>  <tspan x="139" y="176" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on </tspan> <tspan x="139" y="195" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">several originating technologies, </tspan> <tspan x="139" y="214" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">the most well known being </tspan> <tspan x="139" y="233" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JavaScript (Netscape) and JScript </tspan> <tspan x="139" y="252" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">(Microsoft). The language was </tspan> <tspan x="139" y="271" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at </tspan></text><text id="top" fill="#999" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="125" y="90">top</tspan></text><path id="Line-3" fill="#999" fill-rule="nonzero" d="M100.548 104.403l18.95 9.6-19.05 9.4.041-8.001-78-.41.017-3 77.999.41.043-8z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M118.076 113.232l21.132 2.162-4.288 6.754 257.148 163.24-1.608 2.532-257.148-163.239-4.287 6.754-10.95-18.203z"/><path id="Line-3-Copy" fill="#999" fill-rule="nonzero" d="M118.998 56.5L119 94.499h8l-9.498 19.001-9.501-19H116l-.002-38h3z"/><g id="Group" transform="rotate(32.5 -148.357 454.177)"><path id="Rectangle" fill="#FFF" d="M0 0h133v22H0z" filter="url(#filter-1)"/><text id="(width,height)" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="8.682" y="15.378">(width,height)</tspan></text></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="521" height="355" viewBox="0 0 521 355"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><defs><filter id="filter-1" width="118%" height="209.1%" x="-9%" y="-54.5%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceGraphic" stdDeviation="4"/></filter></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="coordinates-negative.svg"><g id="noun_69008_cc" fill="#E8C48E" transform="translate(13 11)"><path id="Shape" d="M455.313 330H9.688C4.34 330 0 326.288 0 321.75V8.25C0 3.713 4.34 0 9.688 0h445.625C460.64 0 465 3.712 465 8.25v313.5c0 4.538-4.36 8.25-9.688 8.25zM9.432 318.939h444.25V11.06H9.432V318.94z"/><path id="Shape" d="M19.674 46C14.334 46 10 44.875 10 43.5s4.334-2.5 9.674-2.5h425.652c5.32 0 9.674 1.125 9.674 2.5s-4.353 2.5-9.674 2.5H19.674zM31 27.5c0 3.039-2.461 5.5-5.5 5.5a5.498 5.498 0 01-5.5-5.5c0-3.039 2.461-5.5 5.5-5.5s5.5 2.461 5.5 5.5zM59 27.5c0 3.039-2.461 5.5-5.5 5.5a5.498 5.498 0 01-5.5-5.5c0-3.039 2.461-5.5 5.5-5.5s5.5 2.461 5.5 5.5zM87 27.5c0 3.039-2.461 5.5-5.5 5.5a5.498 5.498 0 01-5.5-5.5c0-3.039 2.461-5.5 5.5-5.5s5.5 2.461 5.5 5.5z"/></g><text id="bottom" fill="#999" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="414" y="196">bottom</tspan></text><path id="Line-30-Copy-2" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M392.5 290v37"/><path id="Line-29-Copy" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M394 288h69"/><text id="(x,y)" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="395" y="305">(x,y)</tspan></text><text id="(x,y)-copy" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="395" y="305">(x,y)</tspan></text><text id="left" fill="#999" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="50" y="129">left</tspan></text><path id="Line-Copy" fill="#999" fill-rule="nonzero" d="M410 56.5v213h8l-9.5 19-9.5-19h8v-213h3z"/><text id="right" fill="#999" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="188" y="323">right</tspan></text><path id="Line-3-Copy-2" fill="#999" fill-rule="nonzero" d="M371.498 295.5l19 9.5-19 9.5-.001-8H21.502v-3h349.995v-8z"/><path id="Rectangle-1" fill="#E8C48F" fill-opacity=".88" d="M393 113v175H118V113h275zm-10.643 10H129.015v155h253.342V123z"/><text id="Introduction-This-Ec" fill="#5A4739" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" opacity=".7"><tspan x="139" y="148">Introduction</tspan>  <tspan x="139" y="176" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on </tspan> <tspan x="139" y="195" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">several originating technologies, </tspan> <tspan x="139" y="214" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">the most well known being </tspan> <tspan x="139" y="233" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JavaScript (Netscape) and JScript </tspan> <tspan x="139" y="252" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">(Microsoft). The language was </tspan> <tspan x="139" y="271" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at </tspan></text><text id="top" fill="#999" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="125" y="90">top</tspan></text><path id="Line-3" fill="#999" fill-rule="nonzero" d="M100.548 104.403l18.95 9.6-19.05 9.4.041-8.001-76.5-.402-1.5-.008.017-3 1.5.008 76.499.402.043-8z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M118.076 113.232l21.132 2.162-4.288 6.754 255.882 162.436 1.266.804-1.608 2.532-1.266-.804-255.882-162.435-4.287 6.754-10.95-18.203z"/><path id="Line-3-Copy" fill="#999" fill-rule="nonzero" d="M118.998 56.5V58L119 94.499h8l-9.498 19.001-9.501-19H116l-.002-36.5v-1.5h3z"/><g id="Group" transform="rotate(32.5 -148.357 454.177)"><path id="Rectangle" fill="#FFF" d="M0 0h133v22H0z" filter="url(#filter-1)"/><text id="(width,height)" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="8.682" y="15.378">(width,height)</tspan></text></g></g></g></svg>
--- a/2-ui/1-document/11-coordinates/coordinates.svg
+++ b/2-ui/1-document/11-coordinates/coordinates.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="521" height="411" viewBox="0 0 521 411"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="coordinates.svg"><g id="noun_69008_cc" fill="#E8C48E" transform="translate(13 11)"><path id="Shape" d="M490.563 386H10.438C4.676 386 0 381.658 0 376.35V9.65C0 4.342 4.676 0 10.438 0h480.125C496.303 0 501 4.343 501 9.65v366.7c0 5.308-4.697 9.65-10.438 9.65zm-480.4-12.939h478.642V12.94H10.162V373.06z"/><path id="Shape" d="M20.859 54.1c-5.753 0-10.422-1.147-10.422-2.55 0-1.402 4.67-2.55 10.422-2.55H479.4c5.732 0 10.422 1.148 10.422 2.55 0 1.403-4.69 2.55-10.422 2.55H20.86zM33.8 31.627a6.024 6.024 0 11-12.05 0 6.024 6.024 0 1112.05 0zM63.988 31.627a6.024 6.024 0 11-12.05 0 6.024 6.024 0 1112.05 0zM94.177 31.627a6.024 6.024 0 11-12.05 0 6.024 6.024 0 1112.05 0z"/></g><text id="height" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="417" y="208">height</tspan></text><text id="bottom" fill="#999" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="451" y="311">bottom</tspan></text><path id="Line-28" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M395 293h103"/><path id="Line-30" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M392 296v74.5"/><path id="Line-30-Copy" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M119 296v46"/><path id="Line-29" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M396 120h30"/><text id="x" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="62" y="113">x</tspan></text><text id="left" fill="#999" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="50" y="135">left</tspan></text><text id="y" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="125" y="79">y</tspan></text><text id="width" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="234" y="339">width</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M414 118.5V273h8l-9.5 19-9.5-19h8V118.5h3z"/><path id="Line-Copy" fill="#999" fill-rule="nonzero" d="M476 65v208h8l-9.5 19-9.5-19h8V65h3z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M371 309l19 9.5-19 9.5-.001-8H116v-3h254.999l.001-8z"/><path id="Line-3" fill="#EE6B47" fill-rule="nonzero" d="M100.05 109.903l18.95 9.6-19.05 9.4.042-8.001-78-.41.016-3 78 .41.042-8z"/><text id="right" fill="#999" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="180" y="375">right</tspan></text><path id="Line-3-Copy-2" fill="#999" fill-rule="nonzero" d="M371 350l19 9.5-19 9.5v-8H21.005v-3H371v-8z"/><path id="Line-3-Copy" fill="#EE6B47" fill-rule="nonzero" d="M119 65l.003 35.749h8l-9.498 19.001-9.502-19h8L116 65h3z"/><path id="Rectangle-1" fill="#E8C48F" fill-opacity=".88" d="M392.629 119v175H118V119h274.629zM382 129H129v155h253V129z"/><text id="Introduction-This-Ec" fill="#5A4739" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" opacity=".8"><tspan x="138.946" y="153.8">Introduction</tspan>  <tspan x="138.946" y="181.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on </tspan> <tspan x="138.946" y="200.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">several originating technologies, </tspan> <tspan x="138.946" y="219.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">the most well known being </tspan> <tspan x="138.946" y="238.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JavaScript (Netscape) and JScript </tspan> <tspan x="138.946" y="257.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">(Microsoft). The language was </tspan> <tspan x="138.946" y="276.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at </tspan></text><text id="top" fill="#999" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="125" y="96">top</tspan></text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="521" height="411" viewBox="0 0 521 411"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="coordinates.svg"><g id="noun_69008_cc" fill="#E8C48E" transform="translate(13 11)"><path id="Shape" d="M490.563 386H10.438C4.676 386 0 381.658 0 376.35V9.65C0 4.342 4.676 0 10.438 0h480.125C496.303 0 501 4.343 501 9.65v366.7c0 5.308-4.697 9.65-10.438 9.65zm-480.4-12.939h478.642V12.94H10.162V373.06z"/><path id="Shape" d="M20.859 54.1c-5.753 0-10.422-1.147-10.422-2.55 0-1.402 4.67-2.55 10.422-2.55H479.4c5.732 0 10.422 1.148 10.422 2.55 0 1.403-4.69 2.55-10.422 2.55H20.86zM33.8 31.627a6.024 6.024 0 11-12.05 0 6.024 6.024 0 1112.05 0zM63.988 31.627a6.024 6.024 0 11-12.05 0 6.024 6.024 0 1112.05 0zM94.177 31.627a6.024 6.024 0 11-12.05 0 6.024 6.024 0 1112.05 0z"/></g><text id="height" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="417" y="208">height</tspan></text><text id="bottom" fill="#999" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="451" y="311">bottom</tspan></text><path id="Line-28" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M395 293h103"/><path id="Line-30" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M392 296v74.5"/><path id="Line-30-Copy" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M119 296v46"/><path id="Line-29" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M396 120h30"/><text id="x" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="62" y="113">x</tspan></text><text id="left" fill="#999" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="50" y="135">left</tspan></text><text id="y" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="125" y="79">y</tspan></text><text id="width" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="234" y="339">width</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M414 118.5V273h8l-9.5 19-9.5-19h8V118.5h3z"/><path id="Line-Copy" fill="#999" fill-rule="nonzero" d="M476 65v208h8l-9.5 19-9.5-19h8V65h3z"/><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M371 309l19 9.5-19 9.5-.001-8H116v-3h254.999l.001-8z"/><path id="Line-3" fill="#EE6B47" fill-rule="nonzero" d="M100.05 109.903l18.95 9.6-19.05 9.4.042-8.001-76.5-.402-1.5-.008.016-3 1.5.008 76.5.402.042-8z"/><text id="right" fill="#999" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="180" y="375">right</tspan></text><path id="Line-3-Copy-2" fill="#999" fill-rule="nonzero" d="M371 350l19 9.5-19 9.5v-8H21.005v-3H371v-8z"/><path id="Line-3-Copy" fill="#EE6B47" fill-rule="nonzero" d="M119 65v1.5l.003 34.249h8l-9.498 19.001-9.502-19h8L116 66.5V65h3z"/><path id="Rectangle-1" fill="#E8C48F" fill-opacity=".88" d="M392.629 119v175H118V119h274.629zM382 129H129v155h253V129z"/><text id="Introduction-This-Ec" fill="#5A4739" font-family="OpenSans-Bold, Open Sans" font-size="16" font-weight="bold" opacity=".8"><tspan x="138.946" y="153.8">Introduction</tspan>  <tspan x="138.946" y="181.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">This Ecma Standard is based on </tspan> <tspan x="138.946" y="200.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">several originating technologies, </tspan> <tspan x="138.946" y="219.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">the most well known being </tspan> <tspan x="138.946" y="238.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">JavaScript (Netscape) and JScript </tspan> <tspan x="138.946" y="257.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">(Microsoft). The language was </tspan> <tspan x="138.946" y="276.8" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal">invented by Brendan Eich at </tspan></text><text id="top" fill="#999" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="125" y="96">top</tspan></text></g></g></svg>
--- a/2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled.svg
+++ b/2-ui/1-document/11-coordinates/document-and-window-coordinates-scrolled.svg
--- a/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg
+++ b/2-ui/2-events/02-bubbling-and-capturing/event-order-bubbling.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="353" height="216" viewBox="0 0 353 216"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="event-order-bubbling.svg"><path id="Rectangle-210" fill="#FFDE99" d="M159.488 140L174 186H60l14.512-46z"/><path id="Rectangle-209" stroke="#CFCE95" stroke-width="18" d="M173.634 81H59.366l-16.09 51h146.447l-16.09-51z"/><path id="Rectangle-208" stroke="#99C0C3" stroke-width="18" d="M193.014 29H39.986l-22.71 72h198.448l-22.71-72z"/><path id="Fill-46" fill="#5A4739" d="M121.5 141v13.816a4.5 4.5 0 01-8.994.212l-.005-.212V141h8.998zm0-31v13h-9v-13h9zm-1.327-88.347l.189.178 17.64 17.64a4.5 4.5 0 01-6.196 6.524l-.168-.16L121.5 35.698V92h-9V35.7l-10.138 10.136a4.5 4.5 0 01-6.523-6.196l.16-.168 17.639-17.64a4.477 4.477 0 013.363-1.3 4.478 4.478 0 013.172 1.122z"/><text id="1" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="210" y="105">1</tspan></text><text id="2" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="185" y="136">2</tspan></text><text id="3" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="157" y="181">3</tspan></text><text id="Most-deeply-nested-e" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="233.48" y="175">Most deeply</tspan> <tspan x="221.306" y="194">nested element</tspan></text><path id="Line-30" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M179.5 177.5h30"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="353" height="216" viewBox="0 0 353 216"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="event-order-bubbling.svg"><path id="Rectangle-210" fill="#FFDE99" d="M159.488 140L174 186H60l14.512-46z"/><path id="Rectangle-209" stroke="#CFCE95" stroke-width="18" d="M173.634 81H59.366l-16.09 51h146.447l-16.09-51z"/><path id="Rectangle-208" stroke="#99C0C3" stroke-width="18" d="M193.014 29H39.986l-22.71 72h198.448l-22.71-72z"/><path id="Fill-46" fill="#5A4739" d="M121.5 141v13.816a4.5 4.5 0 11-9 0V141h9zm0-31v13h-9v-13h9zM117 20.53a4.471 4.471 0 013.362 1.3l17.64 17.64a4.5 4.5 0 01-6.364 6.364L121.5 35.698V92h-9V35.7l-10.138 10.136a4.5 4.5 0 11-6.363-6.364l17.639-17.64a4.477 4.477 0 013.363-1.3z"/><text id="1" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="210" y="105">1</tspan></text><text id="2" fill="#5A4739" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="185" y="136">2</tspan></text><text id="3" fill="#EE6B47" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="157" y="181">3</tspan></text><text id="Most-deeply-nested-e" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="233.48" y="175">Most deeply</tspan> <tspan x="221.306" y="194">nested element</tspan></text><path id="Line-30" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M179.5 177.5h30"/></g></g></svg>
--- a/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md
+++ b/2-ui/2-events/03-event-delegation/4-behavior-tooltip/task.md
@ -22,8 +22,10 @@ In this task we assume that all elements with `data-tooltip` have only text insi

 Details:

+- The distance between the element and the tooltip should be `5px`.
+- The tooltip should be centered relative to the element, if possible.
 - The tooltip should not cross window edges. Normally it should be above the element, but if the element is at the page top and there's no space for the tooltip, then below it.
- The tooltip is given in the `data-tooltip` attribute. It can be arbitrary HTML.
+- The tooltip content is given in the `data-tooltip` attribute. It can be arbitrary HTML.

 You'll need two events here:
 - `mouseover` triggers when a pointer comes over an element.
--- a/2-ui/2-events/03-event-delegation/article.md
+++ b/2-ui/2-events/03-event-delegation/article.md
@ -163,7 +163,7 @@ The handler reads the attribute and executes the method. Take a look at the work

 Please note that `this.onClick` is bound to `this` in `(*)`. That's important, because otherwise `this` inside it would reference the DOM element (`elem`), not the `Menu` object, and `this[action]` would not be what we need.

-So, what the delegation gives us here?
+So, what advantages does delegation give us here?

 ```compare
 + We don't need to write the code to assign a handler to each button. Just make a method and put it in the markup.
@ -242,13 +242,13 @@ That may become really convenient -- no need to write JavaScript for every such

 We can combine multiple behaviors on a single element as well.

-The "behavior" pattern can be an alternative of mini-fragments of JavaScript.
+The "behavior" pattern can be an alternative to mini-fragments of JavaScript.

 ## Summary

 Event delegation is really cool! It's one of the most helpful patterns for DOM events.

-It's often used to add same handling for many similar elements, but not only for that.
+It's often used to add the same handling for many similar elements, but not only for that.

 The algorithm:

@ -261,12 +261,12 @@ Benefits:
 ```compare
 + Simplifies initialization and saves memory: no need to add many handlers.
 + Less code: when adding or removing elements, no need to add/remove handlers.
-+ DOM modifications: we can mass add/remove elements with `innerHTML` and alike.
+ DOM modifications: we can mass add/remove elements with `innerHTML` and the like.
 ```

 The delegation has its limitations of course:

 ```compare
 - First, the event must be bubbling. Some events do not bubble. Also, low-level handlers should not use `event.stopPropagation()`.
- Second, the delegation may add CPU load, because the container-level handler reacts on events in any place of the container, no matter if they interest us or not. But usually the load is negligible, so we don't take it into account.
+- Second, the delegation may add CPU load, because the container-level handler reacts on events in any place of the container, no matter whether they interest us or not. But usually the load is negligible, so we don't take it into account.
 ```
--- a/2-ui/2-events/03-event-delegation/bagua-bubble.svg
+++ b/2-ui/2-events/03-event-delegation/bagua-bubble.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="369" height="216" viewBox="0 0 369 216"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bagua-bubble.svg"><path id="Rectangle-210" fill="#FFDE99" d="M202.488 140L217 186H103l14.512-46z"/><path id="Rectangle-209" stroke="#CFCE95" stroke-width="18" d="M216.634 81H102.366l-16.09 51h146.447l-16.09-51z"/><path id="Rectangle-208" stroke="#99C0C3" stroke-width="18" d="M236.014 29H82.986l-22.71 72h198.448l-22.71-72z"/><path id="Fill-46" fill="#5A4739" d="M164.5 141v13.816a4.5 4.5 0 01-8.994.212l-.005-.212V141h8.998zm0-31v13h-9v-13h9zm-1.327-88.347l.189.178 17.64 17.64a4.5 4.5 0 01-6.196 6.524l-.168-.16L164.5 35.698V92h-9V35.7l-10.138 10.136a4.5 4.5 0 01-6.523-6.196l.16-.168 17.639-17.64a4.477 4.477 0 013.363-1.3 4.478 4.478 0 013.172 1.122z"/><text id="&lt;table&gt;" fill="#99C0C3" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="9" y="30">&lt;table&gt;</tspan></text><text id="&lt;td&gt;" fill="#CFCE95" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="36" y="136">&lt;td&gt;</tspan></text><text id="&lt;strong&gt;" fill="#E8C48E" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="35" y="181">&lt;strong&gt;</tspan></text><text id="event.target" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="271.746" y="181">event.target</tspan></text><path id="Line-30" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M229.5 177.5h30"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="369" height="216" viewBox="0 0 369 216"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="dom" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="bagua-bubble.svg"><path id="Rectangle-210" fill="#FFDE99" d="M202.488 140L217 186H103l14.512-46z"/><path id="Rectangle-209" stroke="#CFCE95" stroke-width="18" d="M216.634 81H102.366l-16.09 51h146.447l-16.09-51z"/><path id="Rectangle-208" stroke="#99C0C3" stroke-width="18" d="M236.014 29H82.986l-22.71 72h198.448l-22.71-72z"/><path id="Fill-46" fill="#5A4739" d="M164.5 141v13.816a4.5 4.5 0 11-9 0V141h9zm0-31v13h-9v-13h9zM160 20.53a4.471 4.471 0 013.362 1.3l17.64 17.64a4.5 4.5 0 01-6.364 6.364L164.5 35.698V92h-9V35.7l-10.138 10.136a4.5 4.5 0 11-6.363-6.364l17.639-17.64a4.477 4.477 0 013.363-1.3z"/><text id="&lt;table&gt;" fill="#99C0C3" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="9" y="30">&lt;table&gt;</tspan></text><text id="&lt;td&gt;" fill="#CFCE95" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="36" y="136">&lt;td&gt;</tspan></text><text id="&lt;strong&gt;" fill="#E8C48E" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold"><tspan x="35" y="181">&lt;strong&gt;</tspan></text><text id="event.target" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="271.746" y="181">event.target</tspan></text><path id="Line-30" stroke="#EE6B47" stroke-dasharray="3,6" stroke-linecap="square" stroke-width="2" d="M229.5 177.5h30"/></g></g></svg>
--- a/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md
+++ b/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/solution.md
@ -20,7 +20,7 @@ The fix is simple:
  }
 </script>

-<a href="http://w3.org" onclick="*!*return handler()*/!*">w3.org</a>
+<a href="https://w3.org" onclick="*!*return handler()*/!*">w3.org</a>
 ```

 Also we can use `event.preventDefault()`, like this:
@ -35,5 +35,5 @@ Also we can use `event.preventDefault()`, like this:
 */!*
 </script>

-<a href="http://w3.org" onclick="*!*handler(event)*/!*">w3.org</a>
+<a href="https://w3.org" onclick="*!*handler(event)*/!*">w3.org</a>
 ```
--- a/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/task.md
+++ b/2-ui/2-events/04-default-browser-action/1-why-return-false-fails/task.md
@ -14,7 +14,7 @@ Why in the code below `return false` doesn't work at all?
  }
 </script>

-<a href="http://w3.org" onclick="handler()">the browser will go to w3.org</a>
+<a href="https://w3.org" onclick="handler()">the browser will go to w3.org</a>
 ```

 The browser follows the URL on click, but we don't want it.
--- a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.view/index.html
+++ b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/solution.view/index.html
@ -16,7 +16,7 @@
  <fieldset id="contents">
    <legend>#contents</legend>
    <p>
-      How about to read <a href="http://wikipedia.org">Wikipedia</a> or visit <a href="http://w3.org"><i>W3.org</i></a> and learn about modern standards?
+      How about to read <a href="https://wikipedia.org">Wikipedia</a> or visit <a href="https://w3.org"><i>W3.org</i></a> and learn about modern standards?
    </p>
  </fieldset>

--- a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/source.view/index.html
+++ b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/source.view/index.html
@ -16,7 +16,7 @@
  <fieldset id="contents">
    <legend>#contents</legend>
    <p>
-      How about to read <a href="http://wikipedia.org">Wikipedia</a> or visit <a href="http://w3.org"><i>W3.org</i></a> and learn about modern standards?
+      How about to read <a href="https://wikipedia.org">Wikipedia</a> or visit <a href="https://w3.org"><i>W3.org</i></a> and learn about modern standards?
    </p>
  </fieldset>

--- a/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/task.md
+++ b/2-ui/2-events/04-default-browser-action/2-catch-link-navigation/task.md
@ -12,5 +12,5 @@ Like this:

 Details:

- HTML inside the element may be loaded or regenerated dynamically at any time, so we can't find all links and put handlers on them. Use the event delegation.
+- HTML inside the element may be loaded or regenerated dynamically at any time, so we can't find all links and put handlers on them. Use event delegation.
 - The content may have nested tags. Inside links too, like `<a href=".."><i>...</i></a>`.
--- a/2-ui/2-events/04-default-browser-action/article.md
+++ b/2-ui/2-events/04-default-browser-action/article.md
@ -8,7 +8,7 @@ For instance:
 - A click on a form submit button - initiates its submission to the server.
 - Pressing a mouse button over a text and moving it - selects the text.

-If we handle an event in JavaScript, we may not want the corresponding browser action to happen, to implement another behavior instead.
+If we handle an event in JavaScript, we may not want the corresponding browser action to happen, and want to implement another behavior instead.

 ## Preventing browser actions

@ -207,7 +207,7 @@ As we can clearly see, `event.stopPropagation()` and `event.preventDefault()` (a
 ```

 ```smart header="Nested context menus architecture"
-There are also alternative ways to implement nested context menus. One of them is to have a single global object with a handler for `document.oncontextmenu`, and also methods that allow to store other handlers in it.
+There are also alternative ways to implement nested context menus. One of them is to have a single global object with a handler for `document.oncontextmenu`, and also methods that allow us to store other handlers in it.

 The object will catch any right-click, look through stored handlers and run the appropriate one.

@ -240,5 +240,5 @@ But we should generally keep the semantic meaning of HTML elements. For instance

 Besides being "just a good thing", that makes your HTML better in terms of accessibility.

-Also if we consider the example with `<a>`, then please note: a browser allows to open such links in a new window (by right-clicking them and other means). And people like that. But if we make a button behave as a link using JavaScript and even look like a link using CSS, then `<a>`-specific browser features still won't work for it.
+Also if we consider the example with `<a>`, then please note: a browser allows us to open such links in a new window (by right-clicking them and other means). And people like that. But if we make a button behave as a link using JavaScript and even look like a link using CSS, then `<a>`-specific browser features still won't work for it.
 ```
--- a/2-ui/2-events/05-dispatch-events/article.md
+++ b/2-ui/2-events/05-dispatch-events/article.md
@ -211,7 +211,7 @@ Please note: the event must have the flag `cancelable: true`, otherwise the call

 ## Events-in-events are synchronous

-Usually events are processed asynchronously. That is: if the browser is processing `onclick` and in the process a new event occurs, then it awaits till `onclick` processing is finished.
+Usually events are processed asynchronously. That is: if the browser is processing `onclick` and in the process a new event occurs, then it waits until the `onclick` processing is finished.

 The exception is when one event is initiated from within another one.

--- a/2-ui/3-event-details/1-mouse-events-basics/article.md
+++ b/2-ui/3-event-details/1-mouse-events-basics/article.md
@ -47,7 +47,7 @@ In cases when a single action initiates multiple events, their order is fixed. T
 ```online
 Click the button below and you'll see the events. Try double-click too.

-On the teststand below all mouse events are logged, and if there are more than 1 second delay between them, then they are separated by a horizontal ruler.
+On the teststand below all mouse events are logged, and if there is more than a 1 second delay between them they are separated by a horizontal ruler.

 Also we can see the `which` property that allows to detect the mouse button.

@ -110,7 +110,7 @@ So if we want to support combinations like `key:Ctrl`+click, then for Mac it mak

 Even if we'd like to force Mac users to `key:Ctrl`+click -- that's kind of difficult. The problem is: a left-click with `key:Ctrl` is interpreted as a *right-click* on MacOS, and it generates the `contextmenu` event, not `click` like Windows/Linux.

-So if we want users of all operational systems to feel comfortable, then together with `ctrlKey` we should check `metaKey`.
+So if we want users of all operating systems to feel comfortable, then together with `ctrlKey` we should check `metaKey`.

 For JS-code it means that we should check `if (event.ctrlKey || event.metaKey)`.
 ```
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html
@ -3,10 +3,9 @@

 <head>
  <meta charset="UTF-8">
-  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="hoverIntent.js"></script>
-  <script src="https://js.cx/test/libs.js"></script>
+  <script src="https://en.js.cx/test/libs.js"></script>
  <script src="test.js"></script>
 </head>

@ -26,6 +25,8 @@
      new HoverIntent({
        elem,
        over() {
+          tooltip.style.left = elem.getBoundingClientRect().left + 5 + 'px';
+          tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
          tooltip.hidden = false;
        },
        out() {
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/style.css
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/style.css
@ -2,6 +2,10 @@
  color: red;
 }

+body {
+  margin: 0;
+}
+
 .minutes {
  color: green;
 }
@ -20,9 +24,15 @@
  top: 0;
 }

-.tooltip {
+#tooltip {
  position: absolute;
-  background: #eee;
-  border: 1px brown solid;
-  padding: 3px;
+  padding: 10px 20px;
+  border: 1px solid #b3c9ce;
+  border-radius: 4px;
+  text-align: center;
+  font: italic 14px/1.3 sans-serif;
+  color: #333;
+  background: #fff;
+  z-index: 100000;
+  box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
 }
--- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
+++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
@ -145,7 +145,7 @@ When the pointer leaves an element -- `mouseleave` triggers.
 ```online
 This example is similar to the one above, but now the top element has `mouseenter/mouseleave` instead of `mouseover/mouseout`.

-As you can see, the only generated events are the ones related to moving the pointer in and out of the top element. Nothing happens when the pointer goes to the child and back. Transitions between descendants are ignores
+As you can see, the only generated events are the ones related to moving the pointer in and out of the top element. Nothing happens when the pointer goes to the child and back. Transitions between descendants are ignored

 [codetabs height=340 src="mouseleave"]
 ```
--- a/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/field.svg
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/solution.view/field.svg
--- a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md
+++ b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md
@ -124,7 +124,7 @@ Let's update our algorithm:

    ```js
    // onmousemove
-    // у мяча ball стоит position:absoute
+    // ball has position:absoute
    ball.style.left = event.pageX - *!*shiftX*/!* + 'px';
    ball.style.top = event.pageY - *!*shiftY*/!* + 'px';
    ```
--- a/2-ui/3-event-details/5-keyboard-events/german-layout.svg
+++ b/2-ui/3-event-details/5-keyboard-events/german-layout.svg
--- a/2-ui/3-event-details/8-onscroll/3-load-visible-img/source.view/index.html
+++ b/2-ui/3-event-details/8-onscroll/3-load-visible-img/source.view/index.html
@ -169,39 +169,9 @@
     * It's enough that the top or bottom edge of the element are visible
     */
    function isVisible(elem) {
-
-      let coords = elem.getBoundingClientRect();
-
-      let windowHeight = document.documentElement.clientHeight;
-
-      // top elem edge is visible OR bottom elem edge is visible
-      let topVisible = coords.top > 0 && coords.top < windowHeight;
-      let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
-
-      return topVisible || bottomVisible;
+      // todo: your code
    }

-    /**
-    A variant of the test that considers the element visible if it's no more than
-    one page after/behind the current screen.
-
-    function isVisible(elem) {
-
-      let coords = elem.getBoundingClientRect();
-
-      let windowHeight = document.documentElement.clientHeight;
-
-      let extendedTop = -windowHeight;
-      let extendedBottom = 2 * windowHeight;
-
-      // top visible || bottom visible
-      let topVisible = coords.top > extendedTop && coords.top < extendedBottom;
-      let bottomVisible = coords.bottom < extendedBottom && coords.bottom > extendedTop;
-
-      return topVisible || bottomVisible;
-    }
-    */
-
    function showVisible() {
      for (let img of document.querySelectorAll('img')) {
        let realSrc = img.dataset.src;
--- a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md
+++ b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md
@ -18,3 +18,5 @@ Use JavaScript to:
 1. Show the value and the text of the selected option.
 2. Add an option: `<option value="classic">Classic</option>`.
 3. Make it selected.
+
+Note, if you've done everything right, your alert should show `blues`.
--- a/2-ui/4-forms-controls/1-form-elements/form-navigation.svg
+++ b/2-ui/4-forms-controls/1-form-elements/form-navigation.svg
--- a/2-ui/99-ui-misc/02-selection-range/article.md
+++ b/2-ui/99-ui-misc/02-selection-range/article.md
@ -428,7 +428,7 @@ Form elements, such as `input` and `textarea` provide [special API for selection

 Properties:
 - `input.selectionStart` -- position of selection start (writeable),
- `input.selectionEnd` -- position of selection start (writeable),
+- `input.selectionEnd` -- position of selection end (writeable),
 - `input.selectionDirection` -- selection direction, one of: "forward", "backward" or "none" (if e.g. selected with a double mouse click),

 Events:
--- a/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg
+++ b/2-ui/99-ui-misc/02-selection-range/range-example-p-2-b-3-range.svg
--- a/2-ui/99-ui-misc/02-selection-range/selection-firefox.svg
+++ b/2-ui/99-ui-misc/02-selection-range/selection-firefox.svg
--- a/2-ui/99-ui-misc/03-event-loop/eventLoop-full.svg
+++ b/2-ui/99-ui-misc/03-event-loop/eventLoop-full.svg
--- a/2-ui/99-ui-misc/03-event-loop/eventLoop.svg
+++ b/2-ui/99-ui-misc/03-event-loop/eventLoop.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="479" height="279" viewBox="0 0 479 279"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="promise" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="eventLoop.svg"><path id="Rectangle-1-Copy-5" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M218 173h108v28H218z"/><text id="..." fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="258.9" y="189">...</tspan></text><path id="Rectangle-1-Copy-6" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M218 90h108v28H218z"/><path id="Rectangle-1-Copy-8" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M218 117h108v28H218z"/><text id="mousemove" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="233.7" y="136">mousemove</tspan></text><path id="Rectangle-1-Copy-9" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M218 145h108v28H218z"/><text id="script" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="246.8" y="109">script</tspan></text><text id="event-loop" fill="#000" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal"><tspan x="69.662" y="134">event</tspan> <tspan x="75.615" y="167">loop</tspan></text><text id="macrotask-queue" fill="#9B9B9B" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal"><tspan x="345.111" y="136">macrotask</tspan> <tspan x="367.951" y="169">queue</tspan></text><path id="Path" fill="#EE6B47" fill-rule="nonzero" d="M192 40c22.734 0 44.327 7.535 61.907 21.191l.143.122 8.96 8.421-4.583-14.609 3.817-1.197 7.933 25.287-25.73-6.351.959-3.884 14.865 3.669-8.892-8.356-.619-.476C234.003 51.038 213.54 44 192 44c-31.059 0-59.667 14.695-77.864 39.143l-3.208-2.388C129.87 55.303 159.664 40 192 40z"/><path id="Path-Copy-2" fill="#EE6B47" fill-rule="nonzero" d="M269.882 208.148l2.823 2.834c-.37.368-.724.723-1.095 1.096l-6.044 6.136c-7.85 7.915-12.419 11.984-18.455 16.046l-1.104.732c-15.185 9.934-34.01 15.688-51.594 15.688-25.515 0-47.653-6.986-64.666-20.124l-.089-.069-8.934-8.66 4.36 14.68-3.835 1.139-7.544-25.407 25.63 6.747-1.019 3.868-14.808-3.898 8.772 8.502.57.435c16.198 12.252 37.233 18.787 61.563 18.787 16.796 0 34.862-5.522 49.404-15.035 6.435-4.21 10.964-8.214 19.407-16.751l4.773-4.853 1.885-1.893z"/><text id="setTimeout" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="230" y="164">setTimeout</tspan></text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="479" height="279" viewBox="0 0 479 279"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="promise" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="eventLoop.svg"><path id="Rectangle-1-Copy-5" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M218 173h108v28H218z"/><text id="..." fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="258.9" y="189">...</tspan></text><path id="Rectangle-1-Copy-6" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M218 90h108v28H218z"/><path id="Rectangle-1-Copy-8" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M218 117h108v28H218z"/><text id="mousemove" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="233.7" y="136">mousemove</tspan></text><path id="Rectangle-1-Copy-9" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M218 145h108v28H218z"/><text id="script" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="246.8" y="109">script</tspan></text><text id="event-loop" fill="#000" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal"><tspan x="69.662" y="134">event</tspan> <tspan x="75.615" y="167">loop</tspan></text><text id="macrotask-queue" fill="#9B9B9B" font-family="OpenSans-Regular, Open Sans" font-size="24" font-weight="normal"><tspan x="345.111" y="136">macrotask</tspan> <tspan x="367.951" y="169">queue</tspan></text><path id="Path" fill="#EE6B47" fill-rule="nonzero" d="M192 40c22.467 0 43.818 7.359 61.285 20.712l.622.479.143.122 8.961 8.422-4.584-14.61 3.817-1.197 6.869 21.895 1.064 3.392-3.452-.852-22.278-5.5.959-3.883 14.864 3.669-8.886-8.352-.55-.424c-16.564-12.656-36.757-19.698-58.036-19.87L192 44c-30.748 0-59.095 14.403-77.315 38.412l-.549.73-3.208-2.387C129.87 55.303 159.664 40 192 40z"/><path id="Path-Copy-2" fill="#EE6B47" fill-rule="nonzero" d="M269.882 208.148l2.823 2.834-.366.365a533.245 533.245 0 00-3.982 4.033l-.333.34c-9.922 10.12-14.79 14.544-22.017 19.272-15.185 9.934-34.01 15.688-51.594 15.688-25.222 0-47.144-6.827-64.077-19.673l-.589-.45-.089-.07-.08-.078-8.854-8.581 4.36 14.68-3.835 1.138-6.532-21.998-1.012-3.409 3.439.906 22.19 5.841-1.018 3.868-14.808-3.898 8.766 8.497.488.374c16.02 12.15 36.782 18.698 60.792 18.85l.859.003c16.796 0 34.862-5.522 49.404-15.035 6.911-4.521 11.624-8.806 21.35-18.725l.334-.34c2.06-2.101 3.135-3.19 4.381-4.432z"/><text id="setTimeout" fill="#8A704D" font-family="PTMono-Regular, PT Mono" font-size="14" font-weight="normal"><tspan x="230" y="164">setTimeout</tspan></text></g></g></svg>
--- a/5-network/02-formdata/article.md
+++ b/5-network/02-formdata/article.md
@ -54,14 +54,14 @@ In this example, the server code is not presented, as it's beyound our scope. Th
 We can modify fields in `FormData` with methods:

 - `formData.append(name, value)` - add a form field with the given `name` and `value`,
- `formData.append(name, blob, fileName)` - add a field as if it were `<input type="file">`, the third argument `fileName` sets file name (not form field name), as it it were a name of the file in user's filesystem,
+- `formData.append(name, blob, fileName)` - add a field as if it were `<input type="file">`, the third argument `fileName` sets file name (not form field name), as it were a name of the file in user's filesystem,
 - `formData.delete(name)` - remove the field with the given `name`,
 - `formData.get(name)` - get the value of the field with the given `name`,
 - `formData.has(name)` - if there exists a field with the given `name`, returns `true`, otherwise `false`

 A form is technically allowed to have many fields with the same `name`, so multiple calls to `append` add more same-named fields.

-There's also method `set`, with the same syntax as `append`. The difference is that `.set` removes all fields with the given `name`, and then appends a new field. So it makes sure there's only field with such `name`, the rest is just like `append`:
+There's also method `set`, with the same syntax as `append`. The difference is that `.set` removes all fields with the given `name`, and then appends a new field. So it makes sure there's only one field with such `name`, the rest is just like `append`:

 - `formData.set(name, value)`,
 - `formData.set(name, blob, fileName)`.
--- a/5-network/05-fetch-crossorigin/cors-gmail-messages.svg
+++ b/5-network/05-fetch-crossorigin/cors-gmail-messages.svg
--- a/5-network/10-long-polling/long-polling.svg
+++ b/5-network/10-long-polling/long-polling.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="521" height="320" viewBox="0 0 521 320"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="network" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="long-polling.svg"><text id="Browser" fill="#000" font-family="OpenSans-Regular, Open Sans" font-size="16" font-weight="normal"><tspan x="27" y="74">Browser</tspan></text><text id="Server" fill="#000" font-family="OpenSans-Regular, Open Sans" font-size="16" font-weight="normal"><tspan x="31" y="226">Server</tspan></text><path id="Line" fill="#000" fill-rule="nonzero" d="M450.81 75.82l9.21 5.18-9.21 5.18-.49-.87 6.771-3.81H66.5v-1h390.591l-6.772-3.81.49-.87zM450.81 200.32l9.21 5.18-9.21 5.18-.49-.87 6.769-3.81H65.5v-1h391.593l-6.774-3.81.49-.87z"/><text id="request" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(76 113.291 143.266)"><tspan x="83.891" y="146.266">request</tspan></text><text id="connection-hangs" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="126" y="227">connection</tspan> <tspan x="142.519" y="245">hangs</tspan></text><text id="connection-breaks-en" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="12" font-weight="normal"><tspan x="186.21" y="264">connection breaks</tspan> <tspan x="196.599" y="282">end of request</tspan></text><path id="Line-3" fill="#EE6B47" fill-rule="nonzero" d="M90.233 80.79l27.406 111.874 5.829-1.428L120 206.5l-10.13-11.932 5.827-1.429L88.291 81.267l1.942-.476z"/><text id="data" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(-76 206.38 143.266)"><tspan x="189.58" y="146.266">data</tspan></text><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M233.226 82l3.107 15.341-5.793-1.565-29.835 110.45-1.931-.521 29.834-110.45-5.79-1.565L233.225 82z"/><path id="Line-2-Copy" fill="#EE6B47" fill-rule="nonzero" d="M377.226 82l3.107 15.341-5.793-1.565-29.835 110.45-1.931-.521 29.834-110.45-5.79-1.565L377.225 82z"/><text id="request-copy" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(76 260.291 143.266)"><tspan x="230.891" y="146.266">request</tspan></text><text id="connection-hangs-copy" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="270" y="227">connection</tspan> <tspan x="286.519" y="245">hangs</tspan></text><path id="Line-3-Copy-3" fill="#EE6B47" fill-rule="nonzero" d="M237.233 80.79l27.406 111.874 5.829-1.428L267 206.5l-10.13-11.932 5.827-1.429-27.406-111.872 1.942-.476z"/><text id="request-copy-2" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(76 404.291 143.266)"><tspan x="374.891" y="146.266">request</tspan></text><path id="Line-3-Copy-4" fill="#EE6B47" fill-rule="nonzero" d="M381.233 80.79l27.406 111.874 5.829-1.428L411 206.5l-10.13-11.932 5.827-1.429-27.406-111.872 1.942-.476z"/><text id="data-copy" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(-76 350.38 143.266)"><tspan x="333.58" y="146.266">data</tspan></text><path id="Line" stroke="#979797" stroke-dasharray="3,3" stroke-linecap="square" d="M235 40.75v201"/><text id="connection-breaks-en-copy" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="12" font-weight="normal"><tspan x="330.21" y="264">connection breaks</tspan> <tspan x="340.599" y="282">end of request</tspan></text><path id="Line-Copy" stroke="#979797" stroke-dasharray="3,3" stroke-linecap="square" d="M379 40.75v201"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="521" height="320" viewBox="0 0 521 320"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="network" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="long-polling.svg"><text id="Browser" fill="#000" font-family="OpenSans-Regular, Open Sans" font-size="16" font-weight="normal"><tspan x="27" y="74">Browser</tspan></text><text id="Server" fill="#000" font-family="OpenSans-Regular, Open Sans" font-size="16" font-weight="normal"><tspan x="31" y="226">Server</tspan></text><path id="Line" fill="#000" fill-rule="nonzero" d="M450.81 75.82l.435.244 8 4.5.775.436-.775.436-8 4.5-.436.245-.49-.872.436-.245 6.336-3.564H66.5v-1h390.591l-6.336-3.564-.436-.245.49-.872zM450.81 200.32l.435.244 8 4.5.775.436-.775.436-8 4.5-.436.245-.49-.872.436-.245L457.09 206H65.5v-1h391.591l-6.336-3.564-.436-.245.49-.872z"/><text id="request" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(76 113.291 143.266)"><tspan x="83.891" y="146.266">request</tspan></text><text id="connection-hangs" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="126" y="227">connection</tspan> <tspan x="142.519" y="245">hangs</tspan></text><text id="connection-breaks-en" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="12" font-weight="normal"><tspan x="186.21" y="264">connection breaks</tspan> <tspan x="196.599" y="282">end of request</tspan></text><path id="Line-3" fill="#EE6B47" fill-rule="nonzero" d="M90.233 80.79l.238.972 27.169 110.901 5.828-1.427L120 206.5l-10.13-11.932 5.827-1.429L88.529 82.238l-.238-.971 1.942-.476z"/><text id="data" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(-76 206.38 143.266)"><tspan x="189.58" y="146.266">data</tspan></text><path id="Line-2" fill="#EE6B47" fill-rule="nonzero" d="M233.226 82l3.107 15.341-5.794-1.565-29.574 109.485-.26.965-1.931-.521.26-.966L228.61 95.255l-5.792-1.565L233.226 82z"/><path id="Line-2-Copy" fill="#EE6B47" fill-rule="nonzero" d="M377.226 82l3.107 15.341-5.794-1.565-29.574 109.485-.26.965-1.931-.521.26-.966L372.61 95.255l-5.792-1.565L377.226 82z"/><text id="request-copy" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(76 260.291 143.266)"><tspan x="230.891" y="146.266">request</tspan></text><text id="connection-hangs-copy" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="270" y="227">connection</tspan> <tspan x="286.519" y="245">hangs</tspan></text><path id="Line-3-Copy-3" fill="#EE6B47" fill-rule="nonzero" d="M237.233 80.79l.238.972 27.169 110.901 5.828-1.427L267 206.5l-10.13-11.932 5.827-1.429-27.168-110.901-.238-.971 1.942-.476z"/><text id="request-copy-2" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(76 404.291 143.266)"><tspan x="374.891" y="146.266">request</tspan></text><path id="Line-3-Copy-4" fill="#EE6B47" fill-rule="nonzero" d="M381.233 80.79l.238.972 27.169 110.901 5.828-1.427L411 206.5l-10.13-11.932 5.827-1.429-27.168-110.901-.238-.971 1.942-.476z"/><text id="data-copy" fill="#8A704D" font-family="PTMono-Bold, PT Mono" font-size="14" font-weight="bold" transform="rotate(-76 350.38 143.266)"><tspan x="333.58" y="146.266">data</tspan></text><path id="Line" stroke="#979797" stroke-dasharray="3,3" stroke-linecap="square" d="M235 40.75v201"/><text id="connection-breaks-en-copy" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="12" font-weight="normal"><tspan x="330.21" y="264">connection breaks</tspan> <tspan x="340.599" y="282">end of request</tspan></text><path id="Line-Copy" stroke="#979797" stroke-dasharray="3,3" stroke-linecap="square" d="M379 40.75v201"/></g></g></svg>
--- a/5-network/11-websocket/article.md
+++ b/5-network/11-websocket/article.md
@ -119,9 +119,9 @@ For instance:

 - `Sec-WebSocket-Extensions: deflate-frame` means that the browser supports data compression. An extension is something related to transferring the data, functionality that extends WebSocket protocol. The header `Sec-WebSocket-Extensions` is sent automatically by the browser, with the list of all extenions it supports.

- `Sec-WebSocket-Protocol: soap, wamp` means that we'd like to transfer not just any data, but the data in [SOAP](http://en.wikipedia.org/wiki/SOAP) or WAMP ("The WebSocket Application Messaging Protocol") protocols. WebSocket subprotocols are registered in the [IANA catalogue](http://www.iana.org/assignments/websocket/websocket.xml).
+- `Sec-WebSocket-Protocol: soap, wamp` means that we'd like to transfer not just any data, but the data in [SOAP](http://en.wikipedia.org/wiki/SOAP) or WAMP ("The WebSocket Application Messaging Protocol") protocols. WebSocket subprotocols are registered in the [IANA catalogue](http://www.iana.org/assignments/websocket/websocket.xml). So, this header describes data formats that we're going to use.

-    This optional header is set by us, to tell the server which subprotocols our code supports, using the second (optional) parameter of `new WebSocket`. That's the array of subprotocols, e.g. if we'd like to use SOAP or WAMP:
+    This optional header is set using the second parameter of `new WebSocket`. That's the array of subprotocols, e.g. if we'd like to use SOAP or WAMP:

    ```js
    let socket = new WebSocket("wss://javascript.info/chat", ["soap", "wamp"]);
--- a/6-data-storage/01-cookie/cookie-third-party-2.svg
+++ b/6-data-storage/01-cookie/cookie-third-party-2.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="668" height="192" viewBox="0 0 668 192"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="data-storage" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="cookie-third-party-2.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M38 48h282v99H38z"/><text id="&lt;img-src=&quot;https://ad" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="42" y="70">&lt;img src=&quot;https://ads.com/banner.png&quot;&gt;</tspan></text><text id="site.com" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="149" y="36">site.com</tspan></text><path id="Rectangle-1-Copy" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M505 48h140v99H505z"/><text id="ads.com" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="543" y="36">ads.com</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M321.643 67.375l164.118 22.252.806-5.945L499.5 92.5l-14.814 5.055.806-5.946-164.117-22.252.268-1.982z"/><text id="GET-/banner.png" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" transform="rotate(7 416.568 68.382)"><tspan x="361.068" y="73.882">GET /banner.png</tspan></text><text id="cookie:-id=123" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" transform="rotate(7 410.08 93.2)"><tspan x="363.08" y="98.699">cookie: id=123</tspan></text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="668" height="192" viewBox="0 0 668 192"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="data-storage" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="cookie-third-party-2.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M38 48h282v99H38z"/><text id="&lt;img-src=&quot;https://ad" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="42" y="70">&lt;img src=&quot;https://ads.com/banner.png&quot;&gt;</tspan></text><text id="site.com" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="149" y="36">site.com</tspan></text><path id="Rectangle-1-Copy" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M505 48h140v99H505z"/><text id="ads.com" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="543" y="36">ads.com</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M321.643 67.375l.991.134 163.127 22.119.806-5.946L499.5 92.5l-14.814 5.055.806-5.945-163.126-22.12-.991-.133.268-1.982z"/><text id="GET-/banner.png" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" transform="rotate(7 416.568 68.382)"><tspan x="361.068" y="73.882">GET /banner.png</tspan></text><text id="cookie:-id=123" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" transform="rotate(7 410.08 93.2)"><tspan x="363.08" y="98.699">cookie: id=123</tspan></text></g></g></svg>
--- a/6-data-storage/01-cookie/cookie-third-party-3.svg
+++ b/6-data-storage/01-cookie/cookie-third-party-3.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="668" height="192" viewBox="0 0 668 192"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="data-storage" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="cookie-third-party-3.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M38 48h282v99H38z"/><text id="&lt;img-src=&quot;https://ad" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="42" y="70">&lt;img src=&quot;https://ads.com/banner.png&quot;&gt;</tspan></text><text id="other.com" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="144" y="36">other.com</tspan></text><path id="Rectangle-1-Copy" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M505 48h140v99H505z"/><text id="ads.com" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="543" y="36">ads.com</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M321.643 67.375l164.118 22.252.806-5.945L499.5 92.5l-14.814 5.055.806-5.946-164.117-22.252.268-1.982z"/><text id="GET-/banner.png" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" transform="rotate(7 416.568 68.382)"><tspan x="361.068" y="73.882">GET /banner.png</tspan></text><text id="cookie:-id=123" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" transform="rotate(7 410.08 93.2)"><tspan x="363.08" y="98.699">cookie: id=123</tspan></text><ellipse id="Oval-6" cx="176" cy="31.5" stroke="#EE6B47" stroke-opacity=".573" stroke-width="2" rx="48" ry="13.5"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="668" height="192" viewBox="0 0 668 192"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="data-storage" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="cookie-third-party-3.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M38 48h282v99H38z"/><text id="&lt;img-src=&quot;https://ad" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="42" y="70">&lt;img src=&quot;https://ads.com/banner.png&quot;&gt;</tspan></text><text id="other.com" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="144" y="36">other.com</tspan></text><path id="Rectangle-1-Copy" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M505 48h140v99H505z"/><text id="ads.com" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="543" y="36">ads.com</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M321.643 67.375l.991.134 163.127 22.119.806-5.946L499.5 92.5l-14.814 5.055.806-5.945-163.126-22.12-.991-.133.268-1.982z"/><text id="GET-/banner.png" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" transform="rotate(7 416.568 68.382)"><tspan x="361.068" y="73.882">GET /banner.png</tspan></text><text id="cookie:-id=123" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" transform="rotate(7 410.08 93.2)"><tspan x="363.08" y="98.699">cookie: id=123</tspan></text><ellipse id="Oval-6" cx="176" cy="31.5" stroke="#EE6B47" stroke-opacity=".573" stroke-width="2" rx="48" ry="13.5"/></g></g></svg>
--- a/6-data-storage/01-cookie/cookie-third-party.svg
+++ b/6-data-storage/01-cookie/cookie-third-party.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="668" height="192" viewBox="0 0 668 192"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="data-storage" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="cookie-third-party.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M38 48h282v99H38z"/><text id="&lt;img-src=&quot;https://ad" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="42" y="70">&lt;img src=&quot;https://ads.com/banner.png&quot;&gt;</tspan></text><text id="site.com" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="149" y="36">site.com</tspan></text><path id="Rectangle-1-Copy" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M505 48h140v99H505z"/><text id="ads.com" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="543" y="36">ads.com</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M321.643 64.375l164.118 22.252.806-5.945L499.5 89.5l-14.814 5.055.806-5.946-164.117-22.252.268-1.982z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M500.366 105.882l.252 1.984-164.104 20.86.757 5.953L322.5 129.5l13.006-8.71.755 5.952 164.105-20.86z"/><text id="GET-/banner.png" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" transform="rotate(7 416.568 65.382)"><tspan x="361.068" y="70.882">GET /banner.png</tspan></text><text id="Set-Cookie:-id=123" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" transform="rotate(-7 413.469 128.991)"><tspan x="352.969" y="134.491">Set-Cookie: id=123</tspan></text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="668" height="192" viewBox="0 0 668 192"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="data-storage" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="cookie-third-party.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M38 48h282v99H38z"/><text id="&lt;img-src=&quot;https://ad" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="42" y="70">&lt;img src=&quot;https://ads.com/banner.png&quot;&gt;</tspan></text><text id="site.com" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="149" y="36">site.com</tspan></text><path id="Rectangle-1-Copy" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M505 48h140v99H505z"/><text id="ads.com" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="543" y="36">ads.com</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M321.643 64.375l.991.134 163.127 22.119.806-5.946L499.5 89.5l-14.814 5.055.806-5.945-163.126-22.12-.991-.133.268-1.982z"/><path id="Line-Copy" fill="#EE6B47" fill-rule="nonzero" d="M500.366 105.882l.252 1.984-.992.126-163.112 20.734.757 5.953L322.5 129.5l13.006-8.71.755 5.952 163.113-20.734.992-.126z"/><text id="GET-/banner.png" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" transform="rotate(7 416.568 65.382)"><tspan x="361.068" y="70.882">GET /banner.png</tspan></text><text id="Set-Cookie:-id=123" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" transform="rotate(-7 413.469 128.991)"><tspan x="352.969" y="134.491">Set-Cookie: id=123</tspan></text></g></g></svg>
--- a/6-data-storage/01-cookie/cookie-xsrf.svg
+++ b/6-data-storage/01-cookie/cookie-xsrf.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="668" height="166" viewBox="0 0 668 166"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="data-storage" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="cookie-xsrf.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M38 48h282v88H38z"/><text id="&lt;form-action=&quot;https:" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="48" y="69">&lt;form action=&quot;https://bank.com/pay&quot;&gt;</tspan> <tspan x="48" y="88"> ....</tspan> <tspan x="48" y="107">&lt;/form&gt;</tspan></text><text id="evil.com" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="149" y="36">evil.com</tspan></text><path id="Rectangle-1-Copy" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M505 48h140v88H505z"/><text id="got-the-cookie?-okay" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="526.469" y="108">got the cookie?</tspan> <tspan x="558.308" y="127">okay!</tspan></text><text id="bank.com" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="543" y="36">bank.com</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M321.643 67.375l164.118 22.252.806-5.945L499.5 92.5l-14.814 5.055.806-5.946-164.117-22.252.268-1.982z"/><text id="POST-/pay" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" transform="rotate(7 409.576 67.26)"><tspan x="376.076" y="72.76">POST /pay</tspan></text><text id="cookie:-user=John" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" transform="rotate(7 407.076 90.26)"><tspan x="349.076" y="95.76">cookie: user=John</tspan></text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="668" height="166" viewBox="0 0 668 166"><defs><style>@import url(https://fonts.googleapis.com/css?family=Open+Sans:bold,italic,bolditalic%7CPT+Mono);@font-face{font-family:&apos;PT Mono&apos;;font-weight:700;font-style:normal;src:local(&apos;PT MonoBold&apos;),url(/font/PTMonoBold.woff2) format(&apos;woff2&apos;),url(/font/PTMonoBold.woff) format(&apos;woff&apos;),url(/font/PTMonoBold.ttf) format(&apos;truetype&apos;)}</style></defs><g id="data-storage" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="cookie-xsrf.svg"><path id="Rectangle-1" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M38 48h282v88H38z"/><text id="&lt;form-action=&quot;https:" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="48" y="69">&lt;form action=&quot;https://bank.com/pay&quot;&gt;</tspan> <tspan x="48" y="88"> ....</tspan> <tspan x="48" y="107">&lt;/form&gt;</tspan></text><text id="evil.com" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="149" y="36">evil.com</tspan></text><path id="Rectangle-1-Copy" fill="#FFF9EB" stroke="#E8C48E" stroke-width="2" d="M505 48h140v88H505z"/><text id="got-the-cookie?-okay" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal"><tspan x="526.469" y="108">got the cookie?</tspan> <tspan x="558.308" y="127">okay!</tspan></text><text id="bank.com" fill="#8A704D" font-family="OpenSans-Bold, Open Sans" font-size="14" font-weight="bold"><tspan x="543" y="36">bank.com</tspan></text><path id="Line" fill="#EE6B47" fill-rule="nonzero" d="M321.643 67.375l.991.134 163.127 22.119.806-5.946L499.5 92.5l-14.814 5.055.806-5.945-163.126-22.12-.991-.133.268-1.982z"/><text id="POST-/pay" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" transform="rotate(7 409.576 67.26)"><tspan x="376.076" y="72.76">POST /pay</tspan></text><text id="cookie:-user=John" fill="#8A704D" font-family="OpenSans-Regular, Open Sans" font-size="14" font-weight="normal" transform="rotate(7 407.076 90.26)"><tspan x="349.076" y="95.76">cookie: user=John</tspan></text></g></g></svg>
--- a/6-data-storage/03-indexeddb/indexeddb-index.svg
+++ b/6-data-storage/03-indexeddb/indexeddb-index.svg
--- a/figures.sketch
+++ b/figures.sketch